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);
        }
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，代码中的第一个.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并将选择框设置为禁用，它看起来像这样：

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

5 个答案: