Question

在html中，＆lt; select multiple =“multiple”＆gt;标签，如果选中某个选项，如何禁用多个“其他相关选项” 例：＆lt; select multiple =“multiple”＆gt; ＆lt; option value =''＆gt;＆lt; / option＆gt; ＆lt; option value ='“matchCase”：true'＆gt; matchCase＆lt; / option＆gt; ＆lt; option value ='“matchWildCards”：true'＆gt; matchWildCards＆lt; / option＆gt; ＆lt; option value ='“ignoreSpace”：true'＆gt; ignoreSpace＆lt; / option＆gt; ＆lt; option value ='“ignorePunct”：true'＆gt; ignorePunct＆lt; / option＆gt; ＆lt; option value ='“matchWholeWord”：true'＆gt; matchWholeWord＆lt; / option＆gt; ＆lt; option value ='“matchSoundsLike”：true'＆gt; matchSoundsLike＆lt; / option＆gt; ＆lt; option value ='“matchPrefix”：true'＆gt; matchPrefix＆lt; / option＆gt; ＆lt; option value ='“matchSuffix”：true'＆gt; matchSuffix＆lt; / option＆gt; ＆LT; /选择＆GT; 在上面的例子中如果选中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)
  }
});

我不太确定这个用户体验会不会让用户感到困惑

的 DEMO

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

1 个答案: