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

Question

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. alt text

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

<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.

why did you delete your other question? It was a valid question, so you might want to undelete it: stackoverflow.com/questions/4523127/… — Bozho
– Bozho, Commented Dec 24, 2010 at 21:42

BalusC · Accepted Answer · 2010-12-25 00:12:04Z

3

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.

edited Dec 25, 2010 at 0:12

answered Dec 24, 2010 at 23:18

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

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

10 Comments

eddy Over a year ago

@BalusC- It didn't work, but I think it's because it is necessary to add the value of the checkbox, because when I created the textboxes I gave them a name like this : name="mileage_<c:out value="${item.numberPlate}"/>" .

BalusC Over a year ago

My bad, updated answer. By the way, did you remove the old onchange function as well?

eddy Over a year ago

yep! Do I have to use it? if so , which function is the onchange attribute is going to point to?

BalusC Over a year ago

No, you must remove it. Did you check the updated answer? I made the mistake to call .checked on a jQuery object instead of the "raw" DOM object.

Blindy Over a year ago

setting false to disabled doesn't enable a control.

|

Tarek Fadel · Accepted Answer · 2010-12-24 21:39:12Z

1

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

answered Dec 24, 2010 at 21:39

Tarek Fadel

1,9931 gold badge15 silver badges22 bronze badges

Comments

Sam 山 · Accepted Answer · 2010-12-24 21:43:05Z

0

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

edited Dec 24, 2010 at 21:43

answered Dec 24, 2010 at 21:33

Sam 山

42.9k36 gold badges116 silver badges158 bronze badges

4 Comments

eddy Over a year ago

Ok Sam , in javascript I used the object 'this' in the enableTextField fuction to tell it , this is the checkbox I want to evaluate. How can I do this in jquery?

eddy Over a year ago

@Sam-But I have an array of checkboxes, would be the same with an array?

Sam 山 Over a year ago

You are somehow going to need to pass the id in there dynamically.

Sam 山 Over a year ago

It easy. Just loop over the array and use 'i' in your for loop to dynamically get the checkbox.

Rodolfo Palma · Accepted Answer · 2010-12-24 22:08:37Z

0

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

});

edited Dec 24, 2010 at 22:08

answered Dec 24, 2010 at 21:57

Rodolfo Palma

2,9313 gold badges17 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

10 Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related