jQuery - 禁用选定选项

Question

jQuery - 禁用选定选项

75

使用jQuery需要禁用已选择的选择框中选项。我希望它可以像asmselect一样变灰。

在这里测试我的例子here。

//JS
$("#theSelect").change(function(){          
  var value = $("#theSelect option:selected").val();
  var theDiv = $(".is" + value);

  theDiv.slideDown().removeClass("hidden");
});


$("div a.remove").click(function () {     
  $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
});

//HTML
<body>
<div class="selectContainer">
    <select id="theSelect">
        <option value="">- Select -</option>
        <option value="Patient">Patient</option>
        <option value="Physician">Physician</option>
        <option value="Nurse">Nurse</option>
    </select>
</div>
<div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Patient">remove</a></div>
</body>

更新：这里是完成的解决方案。感谢Patrick和Simen。

- Jeffrey

4个回答

13

请尝试这个：

$('#select_id option[value="'+value+'"]').attr("disabled", true);

- Siva Anand

6

这将禁用/启用选项，分别在您选择/删除它们时。

$("#theSelect").change(function(){          
    var value = $(this).val();
    if (value === '') return;
    var theDiv = $(".is" + value);

    var option = $("option[value='" + value + "']", this);
    option.attr("disabled","disabled");

    theDiv.slideDown().removeClass("hidden");
    theDiv.find('a').data("option",option);
});


$("div a.remove").click(function () {     
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
    $(this).data("option").removeAttr('disabled');
});

Demo: http://jsfiddle.net/AaXkd/

- Simen Echholt

非常好，这个可以用，但我还需要再加一个功能。它能否保留在“-select-”标题上，并不显示最近选择的选项？ - Jeffrey

在change函数的末尾添加 $(this).val('');。 - Simen Echholt

+1 我喜欢你使用 data() 将 option 与正确的元素关联起来的方法。鉴于这种方法，最好在 change 事件处理程序之外的循环中进行关联，这样你就不必多次分配数据了。看起来很不错。 - user113716

5

这似乎是有效的：

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown().removeClass("hidden");
    //Add this...
    $("#theSelect option:selected").attr('disabled', 'disabled');
});


$("div a.remove").click(function () {     
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
    //...and this.
    $("#theSelect option:disabled").removeAttr('disabled');
});

- jeanreis

与帕特里克的第一次尝试相同的问题。在“删除”点击上启用会更新所有已禁用选项。 - Jeffrey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

将此行添加到您的change事件处理程序中。

    $("#theSelect option:selected").attr('disabled','disabled')
        .siblings().removeAttr('disabled');

这将禁用所选的选项，并启用以前已禁用的选项。

编辑：

如果您不想重新启用以前被禁用的选项，只需删除此行的此部分：

        .siblings().removeAttr('disabled');

编辑：

http://jsfiddle.net/pd5Nk/1/

当您单击“remove”以后，要重新启用它，请将以下内容添加到您的点击处理程序中。

$("#theSelect option[value=" + value + "]").removeAttr('disabled');