javascript - 如何使用 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) : "";
});