javascript 将多选中的一些特定选项设置为禁用和选中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21201732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set some specific options in multiselect as disabled and selected
提问by ishan
I have a multiselect box having some options which i am able to select or disable via jquery, but i am not able to make them do both at the same time. How can i do that via jquery ??
我有一个多选框，其中有一些我可以通过 jquery 选择或禁用的选项，但我无法让它们同时执行。我怎样才能通过 jquery 做到这一点？
Here's what i was doing - JSFiddle
这就是我在做什么 - JSFiddle
In this example i am selecting an option on load and after that disabling it, but the option is still de selectable. I want to keep it selected and disabled all the time.
在这个例子中，我在加载时选择一个选项，然后禁用它，但该选项仍然是不可选择的。我想一直选择和禁用它。
For now i am using click method to keep it selected by adding this line:
现在我正在使用 click 方法通过添加以下行来保持选中状态：
$('#multiSelect').click(function()
{$('#multiSelectoption[value="three"]').attr('selected',true);});
EDIT: People are posting the solution where we select the option again on click, which i already have posted in my question. What i wanted to know is that if there exist some better solution as this one does not look good.
编辑：人们正在发布解决方案，我们在点击时再次选择该选项，我已经在我的问题中发布了该解决方案。我想知道的是，如果存在一些更好的解决方案，因为这个看起来不太好。
回答by Susheel Singh
js fiddle:
js小提琴：
jquery:
查询：
//disabling on load:
$('#multiSelect option[value="three"]').prop('disabled', true);
$("#multiSelect option").on('click',function() {
$('#multiSelect option[value="three"]').prop('selected',true);
});
回答by flitig
If the point is to prevent the value of the select box from being changed after it's set then you should disable the select box instead of just the option item.
如果要防止选择框的值在设置后被更改，那么您应该禁用选择框而不仅仅是选项项。
$('#multiSelect option[value="three"]').prop('selected',true);
$('#multiSelect').prop('disabled',true);
See this fiddle for demonstration: http://jsfiddle.net/zKbVm/1/.
请参阅此小提琴进行演示：http: //jsfiddle.net/zKbVm/1/。
Also, the difference between prop()and attr()is that attr()gets/sets the element's attributes (which reflect the inital state of the element) and prop()gets/sets its properties (which represent the current state of the DOM node). See https://stackoverflow.com/questions/5874652/prop-vs-attrfor more information.
另外，之间的差prop()和attr()是attr()获取/设置元素的属性（其反映元件的inital状态），并且prop()获取/设置其属性（其表示DOM节点的当前状态）。有关更多信息，请参阅https://stackoverflow.com/questions/5874652/prop-vs-attr。
回答by Allan Chua
Here is a small piece of jQuery to solve your problem.
这是一小段 jQuery 来解决您的问题。
$("#multiSelect option").click(function()
{
$("#multiSelect option[value='three']").prop("selected", true);
});
回答by ajay
I guess you could handle that in the create event of multiselect which is called after the widget gets created.
我想你可以在创建小部件后调用的 multiselect 的 create 事件中处理它。
Below is the code snippet which I am using in the current application I am working on;
下面是我在当前正在处理的应用程序中使用的代码片段；
create: function (event, ui) {
$(this).multiselect("widget").find(":checkbox").each(function () {
var checkBoxValue = $(this).val();
// Using linq.js to query the fields and determine whether
// the field is required in my case.
// Replace this if statement with your own logic here
if (Enumerable.From(CHAMP.cache.fields).Count(function (x) {
return x.Id.toString() == checkBoxValue && x.IsRequired == true;
}) > 0) {
$(this).attr("checked", "checked");
$(this).attr("disabled", "disabled");
}
});
}
回答by Mohsin Mujawar
<select multiple="multiple" size="3">
<option value="1" selected>One</option>
<option value="2" disabled>Two</option>
<option value="3" disabled>Three</option>
</select>
