Is it possible to disable a single radio button in a group using jquery?

<div id="divAddNewPayrollItemWages" title="Add New Payroll Item">
    <strong>Wages</strong><br />
    Do you want to set up a payroll item to track wages, annual salary, missions or bonuses?<br />
    <input type="radio" name="rblWages" value="Hourly" />Hourly Wage<br />
    <input type="radio" name="rblWages" value="Annual" />Annual Salary<br />
    <input type="radio" name="rblWages" value="Commission" />Commission<br />
    <input type="radio" name="rblWages" value="Bonus" />Bonus<br /><br />
    <input type="button" value="Back" disabled="disabled" />&nbsp;&nbsp;
    <input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />&nbsp;&nbsp;
    <input type="button" value="Finish" disabled="disabled" />&nbsp;&nbsp;
    <input type="button" value="Cancel" onclick="AddNewPayrollItemWages_Cancel();" />
</div>
<div id="divAddNewPayrollItemHourlyWages" title="Add New Payroll Item">
    <strong>Wages</strong><br />
    Is this item for regular, overtime, sick or vacation pay?<br />
    <input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
    <input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
    <input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
    <input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />
    <input type="button" value="Back" onclick="" />&nbsp;&nbsp;
    <input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />&nbsp;&nbsp;
    <input type="button" value="Finish" disabled="disabled" />&nbsp;&nbsp;
    <input type="button" value="Cancel" onclick="AddNewPayrollItemHourlyWages_Cancel();" />
</div>

What I am trying to acplish is that when a user selects Annual from the first dialogue, the script opens the second dialogue and disables the Overtime radio button from the list. The only problem I am having at this point is disabling the radio button, everything else is good.

Is it possible to disable a single radio button in a group using jquery?

<div id="divAddNewPayrollItemWages" title="Add New Payroll Item">
    <strong>Wages</strong><br />
    Do you want to set up a payroll item to track wages, annual salary, missions or bonuses?<br />
    <input type="radio" name="rblWages" value="Hourly" />Hourly Wage<br />
    <input type="radio" name="rblWages" value="Annual" />Annual Salary<br />
    <input type="radio" name="rblWages" value="Commission" />Commission<br />
    <input type="radio" name="rblWages" value="Bonus" />Bonus<br /><br />
    <input type="button" value="Back" disabled="disabled" />&nbsp;&nbsp;
    <input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />&nbsp;&nbsp;
    <input type="button" value="Finish" disabled="disabled" />&nbsp;&nbsp;
    <input type="button" value="Cancel" onclick="AddNewPayrollItemWages_Cancel();" />
</div>
<div id="divAddNewPayrollItemHourlyWages" title="Add New Payroll Item">
    <strong>Wages</strong><br />
    Is this item for regular, overtime, sick or vacation pay?<br />
    <input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
    <input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
    <input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
    <input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />
    <input type="button" value="Back" onclick="" />&nbsp;&nbsp;
    <input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />&nbsp;&nbsp;
    <input type="button" value="Finish" disabled="disabled" />&nbsp;&nbsp;
    <input type="button" value="Cancel" onclick="AddNewPayrollItemHourlyWages_Cancel();" />
</div>

What I am trying to acplish is that when a user selects Annual from the first dialogue, the script opens the second dialogue and disables the Overtime radio button from the list. The only problem I am having at this point is disabling the radio button, everything else is good.

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 8, 2015 at 20:43 Downgoat 14.4k77 gold badges4747 silver badges7272 bronze badges asked Apr 8, 2015 at 20:36 John SchultzJohn Schultz 67211 gold badge1111 silver badges2929 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

This should do it. Essentially, use jQuery to find an input with name of "rblHourlyWages" and value of "Overtime" and disable it.

$('input[name=rblHourlyWages][value=Overtime]').prop('disabled', true);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
<input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
<input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
<input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />

What you want to do is establish a relationship between what radio button disables another. I would use an array, but that's a whole other pie.

What you can do is something on the lines of checking the radio group and using an if statement.

Array.prototype.forEach.call(document.querySelectorAll("[type='radio']"), function(x) {
    x.addEventListener("click", function() {
        if (x.value === "Annual") { //or any other field
            document.querySelector("['OTHER_RELATED_FIELD']").disabled = true;
        }
    });
});

jQuery way:

$("[type='radio']").on("click", function() {
    if (this.value === "Annual") $("[name='rblHourlyWages'][value='Overtime']").prop("disabled", true);
});

Note that you'll have to reset all radio buttons to enabled before each click function is run so that you can change the radio button and the option will be re-enabled.

Something like this should work. It allows for user to change radio again and reenable the other one

$('[name=rblWages]').change(function(){
   var isAnnual = this.value == 'Annual';
    $('[name=rblHourlyWages][value=Overtime]').prop('disabled', isAnnual);
});

DEMO