jQuery - 禁用选定的选项

标签 jquery html-select

需要使用 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>​

更新:这是 finished solution 。感谢帕特里克和西蒙。

最佳答案

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

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

这将禁用所选选项,并启用所有以前禁用的选项。

编辑:

如果您不想重新启用以前的功能,只需删除这部分行即可:

        .siblings().removeAttr('disabled');
<小时/>

编辑:

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

要在单击“删除”时重新启用,请将其添加到您的单击处理程序中。

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

关于jQuery - 禁用选定的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2867362/

相关文章:

php - 未捕获的类型错误 : Cannot read property 'push' array using jquery and ajax

jquery - 超大的Jquery与背景图片冲突

javascript - 将鼠标悬停在边框上拉动/拉伸(stretch) div?

javascript - 在 html select 上设置选定值而不使用 runat=server

html - Firefox中的下拉列表设计

css - html <option> 中背景的不同样式

javascript - 鼠标悬停时双级滑动 DIV

javascript - 在第二次选择时以 Angular 选择元素不更新模型值

javascript - 下拉检查列表单选取消选择

javascript - 如何访问 DIV 的 innerHTML onclick(ng-click)Angular JS 中的按钮