0

I'm facing the following issue; the submit button should be enabled only when any checkbox is clicked. Using jQuery the code I have is:

$(document).ready(function() {
    var the_terms = $("#pricingTierId");
    the_terms.click(function() {
        if ($(this).is(":checked")) {
            $("#submitBtn").removeAttr("disabled");
        } else {
            $("#submitBtn").attr("disabled", "disabled");
        }
    });
});
<c:if test="${fn:length(incentiveList) gt 0}">
    <input type='button' name="submit" id = "submitBtn" value='Submit Incentives' onClick='execute();' />
</c:if>

However in the checkbox code I have the following

<td>
    <s:checkbox name="checkboxes[%{#stat.index}]" theme="simple" id="%{pricingTierId}"/>    
</td>

my id attribute is defined as id="%{pricingTierId}" so I cannot really pass that in the jQuery function as shown above. Please suggest the suitable way

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
ronan
  • 4,492
  • 13
  • 47
  • 67

1 Answers1

2

Use .prop() instead of .attr(). As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

Add a class to checkbox and then you can use that class like (since OP is using struts2 cssClass is used)

<s:checkbox cssClass="yourClass" name="checkboxes[%{#stat.index}]" theme="simple" id="%{pricingTierId}"/>    

Code, Also your code can be converted to single line

$('.yourClass').change(function() {
    $("#submitBtn").prop("disabled", this.checked == false);
});

If You have multiple checkboxes and atleast one should be checked

$('.yourClass').change(function() {
    $("#submitBtn").prop("disabled", $('.yourClass').is(":checked") == false);
});

Also go through .prop() vs .attr()

Community
  • 1
  • 1
Satpal
  • 132,252
  • 13
  • 159
  • 168