How to check if a checkbox in a checkbox array is checked with jquery

Loading...

How to check if a checkbox in a checkbox array is checked with jquery

I have a html table with a column of text boxes (mileage), all of them are disabled when the page loads, and I need that when user clicks on a check box, the text box for that column should be enabled and become a required field, and then  if  the user unchecks the checkbox, the textbox on that row must be disabled and the required class removed.

I already have the function to enable and disable the text boxes (column mileage) when the user clicks on the corresponding   checkbox, but it is written in javascript.However, for some reason it only works in IE).
Here is the html code

 
    
      
         " onchange="enableTextField(this)" />
      
      
      
      " value="" disabled="true"/>
     
                         


And the javascript code:
function enableTextField(r)
    {   var node = r.parentNode;
        while( node && node.tagName !== 'TR' ) {
            node = node.parentNode;
        }
        var i=node.rowIndex;

        if(document.form1.selectItems[i-1].checked)
        {   

            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=false;
        }
        else
        {

            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).value="";
            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=true;
        }


    }

Now, I know that in order to add or remove dynamically validation rules I have to use: addClass('required');  o removeClass('required') ,but I don't know how to detect whether a  check box is selected or not, and based on that ,enable or disable the text box for that row.
I really hope you can help me out with this.

Solutions/Answers:

Answer 1:

Put this in <head> or in a .js file which is included in <head>.

$(document).ready(function() {
    $("input[name=selectItems]").change(function() {
        $(this).closest("tr").find("input[name^=mileage]").attr("disabled", !this.checked);
    });
});

Here’s a live demo.

Answer 2:

To check if a checkbox is checked or not in jquery you would do $('#CHECKBOX_ID').is(':checked') that will return a boolean you can use in an if statement

Answer 3:

Add an id to the checkbox, call the checkbox through the id, then check for the boolean value of the checkbox.

<!DOCTYPE html>  
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<input id="sam" type="checkbox" name="vehicle" value="Bike" />
</body>
</html>

This will return true/false

$('#sam').is(':checked')

Answer 4:

Something like this should work:

$("input[name='selectItems']").change(function() {

    var $el = $(this);

    if(this.checked) {
        // checkbox checked.
        $el.parents("tr").find("input[name^='mileage_']").atrr("enabled", "enabled");
    } else if(!this.checked) {
        // checkbox NOT checked.
        $el.parents("tr").find("input[name^='mileage_']").atrr("disabled", "disabled");
    }

});

Our Awesome Free Tools

References

Loading...