如果单击第一个选项，则禁用下拉列表中的其他选项答案

【问题标题】：Disable other options in a dropdown, if clicked on the first option如果单击第一个选项，则禁用下拉列表中的其他选项
【发布时间】：2015-01-16 21:20:49
【问题描述】：

我有一个下拉菜单，我可以选择多个选项。如果我选择其中一个选项，我需要禁用其余选项。

例如：在下面的代码中，如果我选择全部选项，我需要禁用其余选项。

<select id="searchRegion" name="searchRegion" multiple="multiple">
<option> Choose Region(s) </option>
<option value="all"> All </option>
<option value="East"> East </option>
<option value="North"> North </option>
<option value="West"> West </option>
<option value="South"> South </option>
</select>

image

【问题讨论】：

听起来 UI 体验很糟糕，因为一旦您选择了 All，用户如何更改他的选择？
使用这个 FIDDLE jsfiddle.net/gf2rsLwz。不仅仅是你所要求的（糟糕的 UI 体验），这才是你真正需要的。 jsfiddle.net/gf2rsLwz
我同意@A.Wolff，你最好使用复选框。
看看这个应该怎么做：jsfiddle.net/7rtjjxn4
@user4269552 看看那里，也许：jsfiddle.net/7rtjjxn4/1

标签： javascript jquery html

【解决方案1】：

见http://jsfiddle.net/xn9rg0kd/

$("#searchRegion").on("change", function(){
    if ($(this).val()[0] == "All"){
     $("#searchRegion option:selected").siblings().attr('disabled', 'disabled');
    }
});

【讨论】：

【解决方案2】：

试试

var $searchRegion = $('#searchRegion').change(function() {
  var isAll = $searchRegion.find('[value="all"]').is(':selected');
  if (isAll) {
    $searchRegion.val('all');
  }
  $searchRegion.find('option').not('[value="all"]').prop('disabled', isAll);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="searchRegion" name="searchRegion" multiple="multiple">
  <option>Choose Region(s)</option>
  <option value="all">All</option>
  <option value="East">East</option>
  <option value="North">North</option>
  <option value="West">West</option>
  <option value="South">South</option>
</select>

【讨论】：

选择后如何取消选择？
@CodingAnt 存在这样的 UI 设计问题...您可以使用 ctrl + click 取消选择