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

3 Answers 3

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