Question

I am trying to disable every input field in a specific part of a web form whenever a radio button is set to the “No” option (and revert this when “Yes” is selected, but am not getting it working properly. I currently have this code for “watching” the radio buttons and enabling/disabling as required:

jQuery("#ReportOn").change(function () {
    if(jQuery("#ReportOff").is(":checked")) {
        // Everything working up until here , but below command does nothing.
        jQuery("#reportform > input").attr("disabled", true);
    } else if(jQuery("#ReportOn").is(":checked")) {
        jQuery("#reportform > input").removeAttr("disabled");
    }
});

The form looks like this:

<form method="post" action="post.php">
    <input type="radio" name="report" id="ReportOn" value="1" /><label for="ReportOn">Yes</label>
    <input type="radio" name="report" id="ReportOff" value="0" /><label for="ReportOff">No</label>
    <div id="reportform">
        <input type="text" name="title" id="ReportTitle" />
        <input type="text" name="subtitle" id="ReportSubtitle" />
    </div>
</form>

Whenever the Reporting radio button is set to No, the rest of the form should be disabled.

What am I missing here that prevents it from working?

Answer 1

Try changing:

jQuery("#reportform > input")

to:

jQuery("#reportform input")