Dynamic javascript to detect if checkboxes are checked and disable corresponding input fields

Question

When loading a set of input fields dynamically with a PHP For clause, I want to have a checkbox for each of the rows so in case the user checks it, all input fields for that particular row will get disabled.

I need to dynamically adapt the javascript so it will disable each particular row every time the corresponding checkbox is clicked but I don't really know how to achieve it.

Here is my code:

 <?php 
for ($i=0;$i<5;$i++)
     {
   ?>
   <tr>
   <td><input id="includeItem<?=$i?>" type="checkbox" onchange="includeMore" name="item<?=$i?>"></td>
   <td><input name="id<?=$i?> style="color:#888;" disabled="disabled"></td>
   <td><input id="formItems<?=$i?>" class="datepicker" name="date<?=$i?>"></td>
   <td><input id="formItems<?=$i?>" name="description<?=$i?>"></td>
   <td><input id="formItems<?=$i?>" name="amount<?=$i?>"></td>
   </tr>
<?php } ?>

Then my javascript is as follows:

<script>
    function includeMore()  {
        var $check = $('#includeItem');
            if($('#includeItem').is(':checked')) 
                {
                $('#formItems').attr.('disabled','');
                }
            else {
                $('#formItems').attr.('disabled','disabled');
                }
        }

</script>

You want to disable the clicked row's checkbox when clicked, correct? — Johan
– Johan, Commented Oct 24, 2013 at 16:41

jonathancardoso · Accepted Answer · 2013-10-24 17:06:04Z

1

First you need to add the change event listener

var $checkboxes = $( '.class-for-the-input' );

$checkboxes.on( 'change', function ( evt ) {
    //... code
});

Inside the function handler, you need to get the parent row, find all input elements that are not equals to the checkbox that was clicked, and disable it based on the state of the checkbox:

var $this = $( this ), isChecked = this.checked,
    $els = $this.parents( 'tr' ).find( ':input' ).not( $this );

if ( isChecked ) {
    $els.prop( 'disabled', 'disabled' );
} else {
    $els.removeProp( 'disabled' );
}

answered Oct 24, 2013 at 17:06

jonathancardoso

12.9k8 gold badges55 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic javascript to detect if checkboxes are checked and disable corresponding input fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related