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

Question

在 Laravel 项目中，创建刀片视图包含一些复选框。我已经很容易实现了，如果第一个复选框被选中，另一个复选框将被禁用。

创建刀片视图

 <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);
    });

但问题出现在编辑刀片视图中。

编辑刀片视图

<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>

在编辑视图中，尽管#inlineCheckbox1 已预先选中，但其他复选框并未禁用。因此，其他复选框似乎可以点击。

我想实现：如果选中#inlineCheckbox1，其他复选框将始终被禁用。

Answer 1

尝试在您的编辑视图中关注 js

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