如何通过使用JQuery对html页面上的先前单选按钮进行某些选择来禁用单选按钮？

Question

I am developing an HTML application utilizing JQuery and JavaScript that has 5 radio questions with 4 possible answers ("Never", "SomeOfTheTime", "MostOfTheTime", "Always") followed by a Yes/No radio question, like so:

radio1 (id="mobility") 1 2 3 4

radio2 (id="feeding") 1 2 3 4

radio3 (id="washingDressing") 1 2 3 4

radio4 (id="bladder") 1 2 3 4

radio5 (id="bowel") 1 2 3 4

radio6 (id="moreAssistance") YN

I am trying to make it such that if the answer to ALL 5 of radios 1-5 are the first option (value) of "Never", then radio 6 is checked No and disabled (else radio 6 is enabled with no option checked), but I can't get it to work.

Here is the HTML for the first radio; the others are similar:

<tr>
<td><label for="mobility">Mobility:<span style="color:red">*</span></label></td>
<td><form:radiobutton path="mobility" id="mobility" value="Never" required="required" /></td>
<td><form:radiobutton path="mobility" id="mobility" value="SomeOfTheTime" required="required" /></td>
<td><form:radiobutton path="mobility" id="mobility" value="MostOfTheTime" required="required" /></td>
<td><form:radiobutton path="mobility" id="mobility" value="Always" required="required" /></td>

I wrote the JQuery scripts, one for each of the 5 radios, the same for all except for the first line with the change function substituting the next radio id, but they don't seem to do the trick. I am displaying the first one below:

$("#mobility").change(function() {

    if ($("#mobility:radio[value='Never']").prop("checked") && $("#feeding:radio[value='Never']").prop("checked") && $("#washingdressing:radio[value='Never']").prop("checked") && $("#bladder:radio[value='Never']").prop("checked") && $("#bowel:radio[value='Never']").prop("checked") ) {

        $("#moreAssistance:radio[value='No']").prop("checked");
        $("#moreAssistance input[type=radio]").attr('disabled', 'disabled');

    } else {
        $("#moreAssistance input[type=radio]").attr('disabled', false);
        $("#moreAssistance:radio[value='No']").prop(checked, false);
    }
}); 

Then I tried to do it by the following code in an attempt to make it more succinct, by trying to do the value check on all 5 of the top radios at once, but that didn't work either:

$(":radio").not("moreAssistance").change(function() {

    if ($(":radio").not("moreAssistance").val==="Never") {

        $("#moreAssistance:radio[value='No']").prop("checked");
        $("#moreAssistance input[type=radio]").attr('disabled', 'disabled');

    } else {

        $("#moreAssistance input[type=radio]").attr('disabled', false);
        $("#moreAssistance:radio[value='No']").prop(checked, false);

    }
});

Can anyone help me to get this to work? I apologize for my HTML/JQuery ineptness - this is my first web project using JQuery and JavaScript and I am a Newbie to both. I appreciate any help I can get!

Answer 1

A quick and dirty HTML for demonstration:

1 <input type="radio" name="mobility" value="never"> <input type="radio" name="mobility" value="some"> <input type="radio" name="mobility" value="most"> <input type="radio" name="mobility" value="always"><br>
2 <input type="radio" name="feeding" value="never"> <input type="radio" name="feeding" value="some"> <input type="radio" name="feeding" value="most"> <input type="radio" name="feeding" value="always"><br>
3 <input type="radio" name="washing" value="never"> <input type="radio" name="washing" value="some"> <input type="radio" name="washing" value="most"> <input type="radio" name="washing" value="always"><br>
4 <input type="radio" name="bladder" value="never"> <input type="radio" name="bladder" value="some"> <input type="radio" name="bladder" value="most"> <input type="radio" name="bladder" value="always"><br>
5 <input type="radio" name="bowel" value="never"> <input type="radio" name="bowel" value="some"> <input type="radio" name="bowel" value="most"> <input type="radio" name="bowel" value="always"><br>
6 <input type="radio" name="assistance" value="Y"><input type="radio" name="assistance" value="N">

JavaScript:

<script>
$(':radio:not([name=assistance])').change(function(){
    var total = $(':radio[value=never]:checked').length;
    if (total === 5) {
        $('input[name=assistance]').prop('disabled', true);
        $('input[name=assistance][value=N]').prop('checked', true);
    }
    else {
        $('input[name=assistance]').prop('disabled', false);
    }
});
</script>

Demo on JSBin