使用无线电启用/禁用不起作用

Question

我正在尝试根据用户对单选按钮的选择来禁用/启用下拉框。我有以下 JSFiddle：JSFiddle，它本身就可以正常工作。

$('input[type=radio]').click(function() {
    var r_id = $("input[@name=sc]:checked").attr('id');
    alert(r_id);

    if (r_id == "bName") {
        //enable By Name drop down
        $(".dName").prop('disabled', false);
        //disable By Specialty drop down
        $(".dSpecialty").prop('disabled', true);
    }
    if (r_id == "bSpecialty") {
        //enable By Specialty drop down
        $(".dSpecialty").prop('disabled', false);
        //disable By Name drop down
        $(".dName").prop('disabled', true);
    }
});

以下页面中的相同代码无效：Website Demo

Answer 1

我刚刚在我的本地 XAMPP 服务器上运行了您的代码。看来问题来自 selected.jquery.js 文件。如果我从您的 example.jquery.html 中删除此脚本，您将获得预期的行为。

发生的情况是，您从一个 <select> 标记开始，其中包含您的 JS 可以正常工作的所有选项。然而，这个 selected.jquery.js 会创建一个 <div> 块来代替这个 <select> 标记。 'disabled' 属性不再适用于这个新建的<div> 块。

参考： How should disabled <div> act?

这个 selected.jquery.js 文件看起来像一些第三方自定义下拉框。不确定是否已经存在禁用此功能的功能，您可能需要检查 API。如果不是，您需要为此 div 创建一个自定义 CSS 类以使其显示为褪色。

Answer 2

我认为一个点指定了一个类名，并且

class="chzn-select dSpecialty" name="dSpecialty"

有另一个名字...你可以尝试改变它

Answer 3

你能简化一下吗：

$('input[type=radio].searchCriteria').click(function () {
    $('.chzn-select').prop('disabled', true);//disable all
    $(this).next('.chzn-select').prop('disabled', false);//enable sibling
});

可能会更好：使用更改处理程序（jQuery 较新版本）：

$('input[type=radio].searchCriteria').on('change',function () {
    $('.chzn-select').prop('disabled', true);//disable all
    $(this).next('.chzn-select').prop('disabled', false);//enable sibling
});

不带“.on”（直接）的 jQuery 早期版本

$('input[type=radio].searchCriteria').change(function () {
    $('.chzn-select').prop('disabled', true);//disable all
    $(this).next('.chzn-select').prop('disabled', false);//enable sibling
});

或者如果您需要动态元素（如果可能，使用包装器 div 等而不是“文档”）

$(document).delegate('input[type=radio].searchCriteria','change',function () {
    $('.chzn-select').prop('disabled', true);//disable all
    $(this).next('.chzn-select').prop('disabled', false);//enable sibling
});

Answer 4

类型、名称、id 和类属性必须用双引号括起来。更新代码： jsfiddle.

<input type="radio" name="sc" id="bName" class="searchCriteria checked" />

更新

在这部分代码中

if (r_id == "bSpecialty") {
            //enable By Specialty drop down
            $(".dSpecialty").prop('disabled', false);
            //disable By Name drop down
            $(".dName").prop('disabled', true);
    }

替换为

  if (r_id == "bSpecialty") {
                //enable By Specialty drop down
                $(".dSpecialty").removeAttr('disabled');
                //disable By Name drop down
                $(".dName").Attr('disabled', true);
        }

告诉我想要发生的事情