Jquery - 预先选择复选框时禁用复选框

Question

In a Laravel Project, the Create Blade View contains some checkboxes. I have easily achieved the feature that, If the first checkbox is selected, the other checkbox will be disabled.

Create Blade View

 <div class="form-group">
      <label for="unit_price">Size</label>
      <div class=" form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0" >
      <label class="form-check-label" for="inlineCheckbox1">0</label>
      </div>
  <div class=" form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10" >
       <label class="form-check-label" for="inlineCheckbox2">10</label>
       </div>
       <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20">
       <label class="form-check-label" for="inlineCheckbox3">20</label>
       </div>
      <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30">
      <label class="form-check-label" for="inlineCheckbox4">30</label>
       </div>
    </div>

jquery

 $("#inlineCheckbox1").click(function() {
        $(":checkbox").not(this).prop("disabled", this.checked);
    });

But the problem occurs in the Edit Blade View.

Edit Blade View

<div class="form-group">
  <label for="unit_price">Size</label>
  <div class=" form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0"
  {{in_array("0",$size)?"checked":""}}>
  <label class="form-check-label" for="inlineCheckbox1">0</label>
  </div>
  <div class=" form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10"
  {{in_array("10",$size)?"checked":""}}>
  <label class="form-check-label" for="inlineCheckbox2">10</label>
  </div>
  <div class="form-check form-check-inline">
   <input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20"
   {{in_array("20",$size)?"checked":""}}>
   <label class="form-check-label" for="inlineCheckbox3">20</label>
    </div>
     <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30"
    {{in_array("30",$size)?"checked":""}}>
    <label class="form-check-label" for="inlineCheckbox4">30</label>
    </div>
  </div>

In the edit view, the other checkboxes are not disabled though #inlineCheckbox1 was pre-selected. So, the other checkboxes seem clickable.

I want to achieve: the other checkboxes will always be disabled if #inlineCheckbox1 is checked.

Answer 1

try following js in your edit view

$(function(){
    if($('#inlineCheckbox1').is(":checked"))
    $(":checkbox").not($('#inlineCheckbox1')).prop("disabled", true);
})