Disable the inputs when checkbox not checked

Question

I have this code and I want to disable all the inputs when the checkbox is not checked.

<tr class="select_tr">
    <td><?= ucwords($food_name); ?></td>

    <td class="form-group text-center">
        <input value="<?= $order_food_id; ?>" type="checkbox" name="select_food[]" checked>
    </td>

    <td class="form-group">
        <input value="<?= $order_food_total_members; ?>" type="text" name="total_members[]" class="form-control" placeholder="Total Members">
    </td>

    <td class="form-group ">
        <input value="<?= $order_food_date; ?>" type="date" name="food_date" class="form-control">
    </td>

    <td class="form-group ">
        <input value="<?= $order_food_time; ?>" type="time" name="food_time" class="form-control">
    </td>
</tr>

I have used this code but it is disabling only the first input and I don't know how to taget the remaining two.

$('input[type="checkbox"]').click(function () {
    if(!this.checked) {
        $(this).closest('td').next('td').find('input:text').attr('disabled' , true);
    } else {
        $(this).closest('td').next('td').find('input:text').attr('disabled' , false);
    }
});

Answer 1

You should be able to do something like this - get all of the elements and then disable. You'll have to do it onclick of the checkbox.

var inputs, index;

inputs = document.getElementsByTagName('input'); // get all of the input elements
for (index = 0; index < inputs.length; ++index) { // loop through them
    inputs[index].disabled = true; // disable them
}

Answer 2

Whatever you have done is partially correct, what you have done is you have targetted with $(this) so obviously it will take the checkbox input and will find the closest 'td' and disable only the first input tag because it is the one which is closest rather you can do this by targetting the element which has this form-control class and disable the event so it will apply to all the input field which has this class which is indirectly the other three input field.

$('input[type="checkbox"]').click(function () {
    if(!this.checked) {
        $('.form-control').attr('disabled' , true);
    } else {
        $('.form-control').attr('disabled' , false);
    }
});

Or the second choice is you can use this each statement to update the input element.

Answer 3

The issue is that you are only selecting a single element:

$(this).closest('td').next('td').find('input:text')

This will find the closest <td> ancestor element to the checkbox, then select the next sibling <td> element, and finally get the descendants of that <td> element that matches the selector input:text . This will result in a single element because only one of your inputs is of type "text", and you are only selecting inside of a single <td> .

What you want to do instead is select all of the input elements that are not checkboxes in the table row <tr> (class .select_tr ):

$(this).closest('.select_tr').find('input:not([type=checkbox])')

This will select the parent <tr> with class .select_tr and then select all input children of it that do not have type=checkbox .

Example:

 $('.select_tr input:checkbox').change(function() { $(this).closest('.select_tr').find('input:not([type=checkbox])').prop("disabled", !this.checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="select_tr"> <td> <?= ucwords($food_name); ?> </td> <td class="form-group text-center"> <input value="<?= $order_food_id; ?>" type="checkbox" name="select_food[]" checked> </td> <td class="form-group"> <input value="<?= $order_food_total_members; ?>" type="text" name="total_members[]" class="form-control" placeholder="Total Members"> </td> <td class="form-group "> <input value="<?= $order_food_date; ?>" type="date" name="food_date" class="form-control"> </td> <td class="form-group "> <input value="<?= $order_food_time; ?>" type="time" name="food_time" class="form-control"> </td> </tr> </table> 

Answer 4

You can try something like this:

var elemCheckbox = document.querySelectorAll('[type="checkbox"]')[0];
var elemInputs = document.querySelectorAll('.form-control');

function toggleInputs() {
    // https://stackoverflow.com/questions/9887360/check-if-checkbox-is-checked-javascript#answer-9887439
    var shallDisable = !elemCheckbox.checked;
    // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
    for (i = 0, len = elemInputs.length; i < len; ++i) {
        // https://stackoverflow.com/questions/7526601/setattributedisabled-false-changes-editable-attribute-to-false#answer-7526666
        elemInputs[i].disabled = shallDisable;
    }
}

elemCheckbox.addEventListener("click", toggleInputs);

Find the explanation in the comments. This example won't disable the checkbox (if you meant it like that).

I would recommend to add an id to the checkbox. This will guarantee an explicit element selection.

You can then get like document.getElementById("<yourUniqueId>");

Answer 5

Your code isn't selecting all the inputs . Use nextAll() for selecting each td after the closest('td').

$('input[type="checkbox"]').click(function(){
 if(!this.checked){
  $(this).closest('td').nextAll('td').find('input').attr('disabled' , true);
 }else{
  $(this).closest('td').nextAll('td').find('input').attr('disabled' , false);
 }
});

JQuery.next() is used for selecting the first matched element after the selected element

So, your code is just affecting the first next only.

JQuery.nextAll() is used for select the next all matched elements after the selected element.

So, using nextAll() instead of next() may solve your problem.