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.