Question

这是示例代码。使用jQuery它工作正常但是当我使用bootstrap将它放在代码中时它不起作用 bootstrap覆盖此jQuery代码 JSFiddle

<select id="mySelect" multiple>
    <optgroup label="MyGroup">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
    </optgroup>
    <optgroup label="MyGroup2">
        <option>Option5</option>
        <option>Option6</option>
        <option>Option7</option>
    </optgroup>
    <optgroup label="MyGroup3">
        <option>Option8</option>
        <option>Option9</option>
        <option>Option10</option>
    </optgroup>
</select>

Answer 1

$(document).ready(function() {
  $("#mySelect").change(function() {
    var selected = $(':selected', this);
    var selopt = selected.closest('optgroup').attr('label');
    if (selopt == "MyGroup") {
      $('optgroup[label=MyGroup2]').prop('disabled', true);
      $('.selectpicker').selectpicker('refresh');
    } else {
      $('optgroup[label=MyGroup2]').prop('disabled', false);
      $('.selectpicker').selectpicker('refresh');
    }
    if (selopt == "MyGroup2") {
      $('optgroup[label=MyGroup]').prop('disabled', true);
      $('.selectpicker').selectpicker('refresh');
    } else {
      $('optgroup[label=MyGroup]').prop('disabled', false);
      $('.selectpicker').selectpicker('refresh');
    }
  });
});

<select id="mySelect" class="selectpicker" multiple>
  <optgroup label="MyGroup">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
  </optgroup>
  <optgroup label="MyGroup2">
    <option>Option5</option>
    <option>Option6</option>
    <option>Option7</option>
  </optgroup>
</select>

This is working js fiddle with all links

Answer 2

您需要按照JSFiddle

删除第7行和第16行的代码

$('optgroup[label=MyGroup2]').prop('disabled', true);

和

$('optgroup[label=MyGroup]').prop('disabled', true);

选中此JSFiddle

能够设置多选，但只有一个OptGroup在bootstrap中可能吗？

2 个答案: