How to enable/disable nested checkboxes using jQuery

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

I have this piece of code in my Laravel Blade File. I am using jquery (after 4 Years, so need a bit of help out here) to set the checkbox inputs under id #subModule as disabled. (This is working fine)

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

Now what I am trying to achieve is based on the checkbox inputs under id #module, the corresponding submodule checkbox should get enabled/disabled.

What I have done till now is this but it is still not working

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

});

Can anyone help me? Any help will be much appreciated.

Answer 1

You need to use class selector instead of id . Then , on click of module checkboxes use .closest("row").find(".subModule > input[type=checkbox]") to refer your submodule checkbox and then simply do attr("disabled", false) to remove disable.

Demo Code:

$('.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>

Answer 2

I see you are using a foreach, to define modules identified by #sameid (in your case id="module").

Ids are there to be unique, so your foreach is probably producing elements that have the same id and therefore the risk that your jquery will not work.