时间戳

首页 > 解决方案 > 如何在使用 jquery 加载时禁用/启用复选框？

javascript - 如何在使用 jquery 加载时禁用/启用复选框？

问题描述

我想加载选中的复选框.group。.group以及未选中的禁用者。我可以切换它们，但不能禁用未选中.group的禁用。

加载后，我希望所有区域都可以Group 2点击。虽然 all in Group 1 显示为灰色，但稍后可单击。

以及当我取消选中Group复选框时。必须禁用所有区域。Group只有在选中a 时，它们才能单击。

$(function() {
  enable_cb();
  $(".group").click(enable_cb);
  $(".zone").attr("disabled",true);//disabled by default
});

function enable_cb() {
  $(this).closest('div').find(".zone").prop("disabled", !this.checked);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<table>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_1" name="g_1" autocomplete="off" />
        <label class="btn btn-outline-success" for="g_1">Group 1</label>
        <input type="checkbox" class="btn-check zone" id="zone_1a" name="zone_1a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_1b" name="zone_1b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_1c" name="zone_1c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1c">Zone C</label>
      </div>
      </td>
  </tr>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_2" name="g_2" checked autocomplete="off" />
        <label class="btn btn-outline-success" for="g_2">Group 2</label>
        <input type="checkbox" class="btn-check zone" id="zone_2a" name="zone_2a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_2b" name="zone_2b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_2c" name="zone_2c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2c">Zone C</label>
      </div>
      </td>
  </tr>  
</table>

请在这里找到小提琴：https ://jsfiddle.net/b50gwmzu/

标签： javascripthtmljquery

解决方案

迭代未选中的组复选框并禁用他们的兄弟姐妹和他们自己

  $("input.group").not(':checked').each(function(){
     $(this).siblings(':checkbox').addBack().prop('disabled', true);  
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<table>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_1" name="g_1" autocomplete="off" />
        <label class="btn btn-outline-success" for="g_1">Group 1</label>
        <input type="checkbox" class="btn-check zone" id="zone_1a" name="zone_1a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_1b" name="zone_1b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_1c" name="zone_1c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1c">Zone C</label>
      </div>
      </td>
  </tr>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_2" name="g_2" checked autocomplete="off" />
        <label class="btn btn-outline-success" for="g_2">Group 2</label>
        <input type="checkbox" class="btn-check zone" id="zone_2a" name="zone_2a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_2b" name="zone_2b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_2c" name="zone_2c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2c">Zone C</label>
      </div>
      </td>
  </tr>  
</table>

推荐阅读