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

在html中，

标记，如果选中某个选项，如何禁用几个“其他相关选项”

例如：

<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相关插件也受欢迎。

这应该满足您的需要。向选项中添加类以简化筛选

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

不过，我不太确定这种用户体验是否会让用户感到困惑

---

此用户体验与Microsoft Word的“查找和替换”功能非常相似，但Word使用了复选框，也许我也应该使用复选框而不是选择。可能更好…然后可以对它们进行分组

$('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)
  }
});