Question

A sample of the HTML snippet is here:

<select name="paytitle" id="paytitle">
    <option value="Budget Keeper" selected>Budget Keeper</option>
    <option value="Bookkeeper">Bookkeeper</option>
    <option value="Treasurer">Treasurer</option>
    <option value="Accounts Payable">Accounts Payable</option>
    <option value="Other">Other</option>
</select>
<div id="otherfield">Other: <input name="paytitleother" type="text" id="paytitleother" class="required" /></div>

I have a function that disables and hides the paytitleother field based on the select value:

$('#paytitle').change(function() {
    if ($(this).val() == 'Other')
    {
        $("#paytitleother").removeAttr("disabled");
        $("#otherfield").css("display", "block");
    } else {
        $("#paytitleother").attr("disabled", true);
        $("#otherfield").css("display", "none");
    }
});

When I attempt to submit the form, the paytitleother field is still failing validation even though it is disabled and hidden. Documentation on the validation plug-in states all disabled fields are ignored automatically but I went the extra step to add ignore: ":disabled" to the validation routine:

$('#fieldForm').validate({
    ignore: ':disabled',
    ...
});

Even with this specification, the validation of the field fails. I have been working all day on this project so it’s possible I’m overlooking something simple but I can’t see it and can’t fathom for the life of me what’s going on.

Answer 1

When setting the disabled attribute, trying using a value of “disabled” instead of true, like so:

$("#paytitleother").attr("disabled", "disabled");

The jQuery documentation on .attr() has some comments related to how set the “disabled” attribute in HTML 4 vs. XHTML and even some musings on HTML5.