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

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

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

还有另一个名字......您可以尝试更改

Answer 2

你可以简化：

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

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

发生的事情是你开始使用<select>标签，其中包含你的JS工作正常的所有选项。但是，这个selected.jquery.js会创建一个<div>块来代替此<select>标记。 “已禁用”属性不再适用于此新构建的<div>块。

参考： How should disabled <div> act?

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

Answer 4

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

告诉我想要发生

使用Radio启用/禁用无效

4 个答案: