0

我正在尝试根据用户对单选按钮的选择来禁用/启用下拉框。我有以下 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);
    }
});

以下页面中的相同代码不起作用：网站演示

4

4 回答 4

1

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

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

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

于 2013-05-13T18:38:12.783 回答
1

你可以简化：

$('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
});
于 2013-05-13T18:53:39.690 回答
1

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

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

参考： 禁用 <div> 应该如何操作？

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

于 2013-05-13T19:49:44.547 回答
0

type、name、id 和 class 属性必须用双引号括起来。更新代码： 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);
        }

告诉我想要发生

于 2013-05-13T18:38:54.123 回答