How to check if a checkbox in a checkbox array is checked with jquery_问答_开发者

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

开发者 https://www.devze.com 2023-01-31 22:35 出处：网络

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

相关专题：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.

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

I already have the function to enable and disable the text boxes (column mileage) whe开发者_如何学Pythonn 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

<tbody>
 <c:forEach items="${list}" var="item">
    <tr>
      <td align="center">
         <input type="checkbox" name="selectItems" value="<c:out value="${item.numberPlate}"/>" onchange="enableTextField(this)" />
      </td>
      <td align="left"><c:out value="${item.numberPlate}"/></td>
      <td align="left"><c:out value="${item.driver.fullName}"/></td>
      <td align="left"><input type="text" name="mileage_<c:out value="${item.numberPlate}"/>" value="" disabled="true"/></td>
     </tr>
  </c:forEach>                       
</tbody>

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.

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.

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

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')

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

});