@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.
Advertisement
Answer
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>