Html Select Only One Checkbox in a Group

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>  $(function() {    $("input:checkbox").on('click', function() {      // in the handler, 'this' refers to the box clicked on      var $box = $(this);      if ($box.is(":checked")) {        // the name of the box is retrieved using the .attr() method        // as it is assumed and expected to be immutable        var group = "input:checkbox[name='" + $box.attr("name") + "']";        // the checked state of the group/box on the other hand will change        // and the current value is retrieved using .prop() method        $(group).prop("checked", false);        $box.prop("checked", true);      } else {        $box.prop("checked", false);      }    });  });</script><form>  <div>    <li>      <div class="radio">        <label>          <input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">Сотовый телефон имеется        </label>      </div>    </li>    <li>      <div class="radio">        <label>          <input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">Сотовый телефон не имеется        </label>      </div>    </li>    <div></form>

Select only one checkbox in a group

If you only want one item to be selectable in each group, then you should use radio buttons rather than checkboxes. Then users will expect and understand that only one item is selectable. And if you create a series of radio buttons with the same "name" attribute, then the browser will automatically only allow one of them to be selected.

If you use checkboxes, then even if you use javascript to achieve what you suggest, then your users are likely to be confused, as the normal use of checkboxes is to allow the selection of multiple items at the same time.

How to only have one checkbox checked at a time?

Here is an example without JQuery. Add a class to your inputs.When Clicked, uncheck everything, and then check the clicked input if it was not checked.

    function check(input)    {          var checkboxes = document.getElementsByClassName("radioCheck");          for(var i = 0; i < checkboxes.length; i++)     {      //uncheck all      if(checkboxes[i].checked == true)      {       checkboxes[i].checked = false;      }     }          //set checked of clicked object     if(input.checked == true)     {      input.checked = false;     }     else     {      input.checked = true;     }     }

<input type="checkbox" class="radioCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes     <input type="checkbox" class="radioCheck" name="creditCheck" id="c02" value="No"  onclick= "check(this);" />No'

function message(){
    alert("You cant check more than 1 checkbox ")
}
document.querySelectorAll(".cgroup").forEach((chbx)=>{
    chbx.addEventListener("change",(e)=>{
        if(!e.target.checked) return;
        var checkedbox = Array.from(document.querySelectorAll(".cgroup")).find(chbx=>chbx!=e.target&&chbx.checked)
        if(checkedbox){
            e.target.checked = false
            message()
        }
    })
})

<div>
      <input class="cgroup" type="checkbox">
      <input class="cgroup" type="checkbox">
      <input class="cgroup" type="checkbox">
      <input class="cgroup" type="checkbox">
    </div>

<div *ngFor="let chk of checkboxes">
  <input type="checkbox" [(ngModel)]="chk.checked" (ngModelChange)="uncheckOther(chk,$event)"> 
  {{chk.value}}
</div>

uncheckOther(chk, event) {

  if (event) {
    //uncheck all
    this.checkboxes.forEach(x => {
      if (x.checked == true)
        x.checked = false;
    })
    //check the selected
    if (chk.checked == true) {
      chk.checked = false;
    } else {
      chk.checked = true;
    }
    if (chk.value == "Request") {
      console.log('Call Request API')
    }
    else if (chk.value == "Reservation") {
      console.log('Call Reservation API')
    }
  }
  else {
    console.log('Call Both API')
  }
}

<input class="form-check-input" type="radio" name="uo" id="uo0" value="0" />
<input class="form-check-input" type="radio" name="uo" id="uo1" value="1" />
<input class="form-check-input" type="radio" name="uo" id="uo2" value="2" />