是否可以禁用jquery中的单个单选按钮

Is it possible disable a single radio button in jquery?

本文关键字：单个 单选按钮 jquery 是否      更新时间：2023-09-26

是否可以使用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, commissions 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>

我试图实现的是，当用户从第一个对话框中选择"年度"时，脚本会打开第二个对话框，并从列表中禁用"加班"单选按钮。我现在唯一的问题是禁用单选按钮，其他一切都很好。

这应该做到。本质上，使用jQuery来查找名称为"的输入；rbl小时工资"以及"0"的值；加班；并禁用它。

$('input[name=rblHourlyWages][value=Overtime]').prop('disabled', true);
<script src="https://ajax.googleapis.com/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 />

您想要做的是在哪个单选按钮禁用另一个单选按钮之间建立关系。我会用一个数组，但那完全是另一回事。

你可以做的是检查无线电组并使用if语句。

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方式：

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

请注意，在运行每个单击功能之前，您必须将所有单选按钮重置为已启用，这样您就可以更改单选按钮，并且该选项将重新启用。

这样的东西应该可以工作。它允许用户再次更改无线电并重新启用另一个

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

DEMO

相关文章：