html <select> 标记多个选项，一个选中，其他几个禁用

Question

在html,<select multiple="multiple">标签中，如果勾选了某个选项，如何禁用多个"other relevant options"

示例：

<select multiple="multiple">
   <option value=''></option>
    <option value='"matchCase": true'>matchCase</option>
    <option value='"matchWildCards": true'>matchWildCards</option>
    <option value='"ignoreSpace": true'>ignoreSpace</option>
    <option value='"ignorePunct": true'>ignorePunct</option>
    <option value='"matchWholeWord": true'>matchWholeWord</option>
    <option value='"matchSoundsLike": true'>matchSoundsLike</option>
    <option value='"matchPrefix": true'>matchPrefix</option>
    <option value='"matchSuffix": true'>matchSuffix</option>
</select>

在上面的例子中

如果选中matchWildCards选项，必须禁用matchCase, matchPrefix, matchSuffix,matchWholeWord选项，如果选中matchWildCards选项，用户将无法再选中这四个选项。如果用户勾选了以上四个选项中的其中一些，则勾选的也必须取消勾选。

是否可以纯粹在 html 中做这样的事情？如果没有，也欢迎javascript或Jquery相关插件。

Answer 1

这应该可以满足您的需求。在选项中添加类以简化筛选

<select multiple="multiple" size="20">
  <option value=''></option>
  <option value='"matchCase": true'>matchCase</option>

  <!-- note added class "no-match"-->
  <option class="no-match" value='"matchWildCards": true'>matchWildCards</option>

  <option value='"ignoreSpace": true'>ignoreSpace</option>
  <option value='"ignorePunct": true'>ignorePunct</option>
  <!-- note added class "match" -->
  <option class="match" value='"matchWholeWord": true'>matchWholeWord</option>
  <option class="match" value='"matchSoundsLike": true'>matchSoundsLike</option>
  <option class="match" value='"matchPrefix": true'>matchPrefix</option>
  <option class="match" value='"matchSuffix": true'>matchSuffix</option>
</select>

JS

$('select').change(function() {
  var $options = $(this).children()
  if ($options.filter('.no-match').is(':selected')) {
    $options.filter('.match').prop('selected', false).prop('disabled', true)
  } else {
    $options.filter('.match').prop('disabled', false)
  }
});

虽然我不太确定这个 UX 不会让用户感到困惑

DEMO

html <select> 标记多个选项，一个选中，其他几个禁用

html <select> tag multiple options, one checked, several others disabled

javascript

jquery

html

html-select