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);
    }
});

Actually, I don't know jquery and javascript much. Can you provide the code? — Mohan Sharma, May 08 '18 at 14:57
No. That's not what SO is for. We're here to debug code, not to write it for you. This is quite straightforward to solve if you break it down in to tasks. How do you know when a checkbox is checked in JS? How do you enable/disable inputs in JS? Google those and you should have more than enough to start. — Rory McCrossan, May 08 '18 at 14:59
I have tried to do it but in my solution, I am able to disable only the first input not others. — Mohan Sharma, May 08 '18 at 15:06
@MohanSharma if you have tried something, you should show it in your post so that we can tell you where you went wrong, and what you can do to fix it. — explv, May 08 '18 at 15:07
Ok, I have updated my post with my solution. Have a look at it — Mohan Sharma, May 08 '18 at 15:16
Great @MohanSharma, hopefully you will get some helpful answers now! — explv, May 08 '18 at 15:26

score 1 · Answer 1 · answered May 08 '18 at 15:56

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.

score 0 · Answer 2 · answered May 08 '18 at 14:59

0

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
}

answered May 08 '18 at 14:59

dmgig

4,400
5
36
47

I don't know who. – dmgig May 08 '18 at 15:08
1

Normally people come with some code to present. It makes things easier. But as you're new I think it doesn't hurt to show some code and explain things. Especially for something so simple. In any case - I hope this helps get you started. – dmgig May 08 '18 at 15:13

score 0 · Answer 3 · answered May 08 '18 at 15:58

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>

Matthi · Answer 4 · 2018-05-08T15:24:00.353

-1

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>");

edited May 08 '18 at 15:24

answered May 08 '18 at 15:17

Matthi

1,073
8
19

1

I am generating tr dynamically so your code will disable all the inputs that are generated dynamically. but I want to disable only one tr's inputs at a time. – Mohan Sharma May 08 '18 at 15:29
1

Not working because every dynamically generated input will have the same id if I give the id to inputs. – Mohan Sharma May 08 '18 at 16:02
There are two ways to solve this problem. 1) If you generate them in JavaScript, not just add them to the DOM, but also store them in an array like ```var elemInputs = []; elemInputs.push();``` – Matthi May 09 '18 at 11:39
Or 2) give the single inputs something to select them as a group and give them scope. For example a class like ```.food-order-group``` and then select them as written above: ```document.querySelectorAll('.food-order-group')``` – Matthi May 09 '18 at 11:42
One of them should work or please provide more information. – Matthi May 09 '18 at 11:42

AA Shakil · Accepted Answer · 2018-05-09T12:35:02.377

-1

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.

edited May 09 '18 at 12:35

answered May 08 '18 at 15:47

AA Shakil

538
4
14

@MohanSharma I'm so glad that my solution is working for you. Please Mark my answer as best as the term of SO. It is the tick sign right left the question. – AA Shakil May 08 '18 at 16:08
I'm not sure why @MohanSharma said this is working. This will not work for the provided HTML as the other inputs are not text inputs. – explv May 09 '18 at 12:09
@explv the other inputs aren't text inputs, but he was trying to disable the inputs. The code works for him and he excepted it because it was correct. You're angry because he doesn't accepted your long written code. Downvoted without any folt. – AA Shakil May 09 '18 at 12:18
@AAShakil I downvoted because it is incorrect, not because i'm angry. `input:text` will only select a single input, so how could it disable all of them? The other two inputs are `input:date` and `input:time`. – explv May 09 '18 at 12:26
@explv May be JQuery is fetching `input:text` as `input` only. You're write and I'm sorry. Let me correct it, but my only folt was using `:text` and everything is okay – AA Shakil May 09 '18 at 12:33

Disable the inputs when checkbox not checked

5 Answers5