Question

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

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

Answer 1

这应该这样做。基本上，使用jQuery查找名称为“rblHourlyWages”且值为“Overtime”的输入并禁用它。

$('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 />

Answer 2

您要做的是在单选按钮禁用另一个按钮之间建立关系。我会使用一个数组，但这是另一个馅饼。

你能做的就是检查无线电组并使用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);
});

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

Answer 3

这样的事情应该有效。它允许用户再次更改无线电并重新启用另一个无线电

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

的 DEMO

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

3 个答案: