如何使用jQuery禁用选择框中的非选定选项？

Question

我在Laravel中有一个可以用动态表单编辑的模型，但我想阻止更改选择框中的选定选项，所以当我打开编辑页面时，我应该能够看到包含所选项目的选择框，但所有其他选项应该是禁用。

也许我可以用jQuery选择所有select并禁用所有未选择的值？ 怎么做？

我试过这个：

// disable non selected items
$('select').each(function(){
    $('option').each(function() {
        if(this.selected) {
            this.attr('disabled', true);
        }
    });
});

但它不起作用，我只需要一些帮助

这是选择框，其他所有都是相同的：

<select name="car">
  <option selected="selected" value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Mercedes</option>
  <option value="4">Audi</option>
</select>

只选择其他值

Answer 1

您的代码有两个问题。

首先 ：您应该检查是否未选择选项（ !this.selected ）然后禁用它。

第二 ： this.attr('disabled', true)在jQuery中不起作用。 你应该使用$(this)代替。

$('select').each(function(){
    $('option').each(function() {
        if(!this.selected) {
            $(this).attr('disabled', true);
        }
    });
});

 $('select').each(function(){ $('option').each(function() { if(!this.selected) { $(this).attr('disabled', true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="car"> <option selected="selected" value="1">Volvo</option> <option value="2">Saab</option> <option value="3">Mercedes</option> <option value="4">Audi</option> </select> 

请注意，代码中的第一个.each()循环是额外的。 底部代码就足够了。

$('option').each(function() {
  !this.selected ? $(this).attr('disabled', true) : "";
});

Answer 2

   $(function(){
        var Obj=$('select').find('option');
          $.each(Obj,function(){
           $(this).is(":selected") ? "" :$(this).attr('disabled',true);
          });
     });

Answer 3

您可以用“$（this）”替换“this”并添加“！” 在if和它可以工作：

$('select').each(function(){
    $('option').each(function() {
        if(!$(this).selected) {
            $(this).attr('disabled', true);
        }
    });
});

Answer 4

好的，我不确定你想做什么，但我可以为你修复你的第一个代码片段：

// disable non selected items
$('select').each(function(){
    $('option').each(function() {
        if(!this.selected) {
            $(this).parent().attr('disabled', true);
        }
    });
});

Answer 5

这只是其他人的更新：

我找到了（对我来说更好的解决方案） https://silviomoreto.github.io/bootstrap-select/examples/#disabled-select-box

使用此插件，您可以将选择框设置为禁用，然后您可以看到之前选择的内容，您无法更改它。

只需在视图中加载插件并添加类.selectpicker并将选择框设置为禁用，它看起来像这样：