Question

我正在进行多选，我需要在选择第一个“全部”（并激活）时禁用所有其他项目并将其灰显。我可以选择正确的选项，但是在选择一个项目时我实际上无法禁用其他项目，然后在取消选择时重新启用它们。

我想到的是，当选择第一个选项时，会以某种方式在每个其他选项上附加/删除“禁用”修饰符。

到目前为止我的代码：

Jquery的

    $('.specialty_select_box').change(function(){
        if($(this).val() == 'all'){
            ......
        }
    });

HTML

<select multiple class="specialty_select_box" name="name" data-placeholder="Select All That Apply" id="specialty">
    <option style="font-weight: bold;" value="all">All Specialties</option>
    <option value="1">Balance</option>
    <option value="2">Therapy</option>
    <option value="3">Analysis</option>
    <option value="4">Occ Therapy</option>
    <option value="5">Medicine</option>
</select>

Answer 1

$('.specialty_select_box').on('change', function(event) {

  if ($(this).val() == 'all') {
    $('.specialty_select_box option').not(':selected').prop('disabled', true);
  }
  else if ($(this).val() === null) {
     var options = $('.specialty_select_box option:disabled'); 

     if (options.length > 0) {
        options.prop('disabled', false);
     }
  }
});

http://plnkr.co/edit/p9hwJsfilCeMpui4uL6E?p=preview

Answer 2

我的建议是为每个选项添加一个类，例如.singleOption，以便您可以一次选择所有要灰显的类，如下所示：

<select multiple class="specialty_select_box" name="name" data-placeholder="Select All That Apply" id="specialty">
    <option style="font-weight: bold;" value="all">All Specialties</option>
    <option class="singleOption" value="1">Balance</option>
    <option class="singleOption" value="2">Therapy</option>
    <option class="singleOption" value="3">Analysis</option>
    <option class="singleOption" value="4">Occ Therapy</option>
    <option class="singleOption" value="5">Medicine</option>
</select>

然后当您确定选择了全部时：选择单个选项并禁用它们：

$('.specialty_select_box').change(function() {
    if($(this).val() == 'all'){
       $('.singleOption').each(function() {
         $(this).attr('disabled', 'disabled');
       });
    }
});

Answer 3

要停用选项，您可以使用$('option').prop('disabled', true);

您可以使用$('option').not(':selected');

选择所有其他选项

Answer 4

你已经在那里，你只需要实现一种方法来实际将disabled属性放在选项元素上。这个小提示显示了这样做的方法，并在再次取消选择all选项时删除已禁用的属性：http://jsfiddle.net/ruhar4j6/

$('.specialty_select_box').change(function(){
        if($(this).val() == 'all'){
            $(this).find("option").each(function(i, o) {
                if ($(o).val() != "all") {
                    $(o).attr("disabled", "disabled");
                }
            });
        } else {
            $(this).find("option").removeAttr("disabled");
        }

    });

选择一个时，灰显（禁用）所有其他选择项？

4 个答案: