如何使用 jQuery enable/disable 嵌套复选框

Question

@foreach($description as $key => $value)
<div class="row">
    <div class="col-12 mb-3">
        <div class="d-block" id="module">
            <input type="checkbox" name="module_access[{{ $key }}]" class="module-checkbox ml-2" value="1">{{ $value['name'] }}
        </div>
        <div class="d-block ml-4 mt-2" id="subModule">
            @if(isset($value['extras']))
                @foreach ($value['extras'] as $index => $extra)
                <input type="checkbox" name="module_access[{{ $key }}][{{ $index }}]" class="sub-module-checkbox ml-2" value="1">{{ $extra }}
                @endforeach
            @endif
        </div>
    </div>
</div>
@endforeach

我的 Laravel Blade 文件中有这段代码。我正在使用 jquery（4 年后，所以在这里需要一些帮助）将 id #subModule 下的复选框输入设置为禁用。（这工作正常）

$('#subModule input[type=checkbox]').attr('disabled','true');

现在我要实现的是基于id#module下的复选框输入，相应的子模块复选框应该得到enabled/disabled。

到目前为止我所做的就是这个，但它仍然不起作用

$('body').on('click', '#module',function(event) {
  if($('input[name="module_access"]:checked').val() != 1) {
    $('#subModule select option').prop("disabled", false);
}

});

谁能帮帮我？任何帮助将不胜感激。

Answer 1

我看到您正在使用 foreach 来定义由 #sameid 标识的模块（在您的例子中为 id="module"）。

ID 必须是唯一的，因此您的 foreach 可能会生成具有相同 ID 的元素，因此存在您的 jquery 无法工作的风险。

Answer 2

您需要使用 class 选择器而不是 id 。然后，在单击 module 复选框时使用 .closest("row").find(".subModule > input[type=checkbox]") 引用您的子模块复选框，然后只需执行 attr("disabled", false) 即可删除禁用。

演示代码:

$('.subModule input[type=checkbox]').attr('disabled', true);
$(document).on('click', '.module input[type=checkbox]', function(event) {
  //check if checkbox is checked
  if ($(this).is(":checked")) {
    //get closest .row and then find submodule checbox add false
    $(this).closest(".row").find(".subModule > input[type=checkbox]").attr("disabled", false);
  } else {
    //make disable..
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-12 mb-3">
  <!--added class-->
    <div class="d-block module">
      <input type="checkbox" name="module_access[{{ $key }}]" class="module-checkbox ml-2" value="1">somethins
    </div>
    <!--aded class-->
    <div class="d-block ml-4 mt-2 subModule">

      <input type="checkbox" name="module_access[{{ $key }}][{{ $index }}]" class="sub-module-checkbox ml-2" value="1">1
      <input type="checkbox" name="module_access[{{ $key }}][{{ $index }}]" class="sub-module-checkbox ml-2" value="1">2
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12 mb-3">
    <div class="d-block module" id="module">
      <input type="checkbox" name="module_access[{{ $key }}]" class="module-checkbox ml-2" value="1">somethins1
    </div>
    <div class="d-block ml-4 mt-2 subModule" id="subModule">

      <input type="checkbox" name="module_access[{{ $key }}][{{ $index }}]" class="sub-module-checkbox ml-2" value="1">1
      <input type="checkbox" name="module_access[{{ $key }}][{{ $index }}]" class="sub-module-checkbox ml-2" value="1">2
    </div>
  </div>
</div>

如何使用 jQuery enable/disable 嵌套复选框

How to enable/disable nested checkboxes using jQuery

javascript

jquery

laravel-blade