我如何在jQuery bootstrap multiselect中更改更改时禁用optgroup

SAN

我有两个多选框,在更改第一个选择框时,我想禁用第二个选择框的某些组。

我正在使用以下代码的multiselect插件的onChange函数

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

我不明白为什么它不起作用,如何实现它。

戴维·斯图兹(David Stutz)

您可以使用以下refresh方法下面的示例演示了如何使用相应的按钮禁用第一个optgroup的用法,但是,该示例可以轻松地适应您在该onChange选项中操作optgroup的具体情况请注意,在禁用optgroup之后,选项的状态(即是否选中)会保留下来,因此您可能要先取消选择选项。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#multiselect').multiselect();
        
        $("#multiselect-disable-optgroup1").on('click', function() {
            $('#multiselect optgroup#optgroup1').prop('disabled', true);
            $('#multiselect').multiselect('refresh');
        });
    });
</script>
</head>
<body>
    <select id="multiselect" multiple="multiple">
        <optgroup label="Group 1" id="optgroup1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </optgroup>
    </select>
    <button id="multiselect-disable-optgroup1">Disable Group 1</button>
</body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery Bootstrap MultiSelect OptGroup选择

来自分类Dev

如何在更改时获取Bootstrap Datepicker的年份和月份

来自分类Dev

如何在jQuery中更改bootstrap glyphicon颜色

来自分类Dev

如何更改Bootstrap已禁用按钮的颜色?

来自分类Dev

如何在Bootstrap中更改btn颜色

来自分类Dev

表单中没有更改时如何禁用按钮[更新]

来自分类Dev

Bootstrap 2.3.2-更改时将填充JQuery国家/地区

来自分类Dev

如何在jQuery MultiSelect中更改选定的文本值

来自分类Dev

如何在“ percentValue”更改时禁用sap.m.ProgressIndicator中的动画?

来自分类Dev

如何在python中更改时间?

来自分类Dev

如何在JavaScript中更改时区?

来自分类Dev

如何在Twitter Bootstrap 3中更改div col顺序

来自分类Dev

如何在Bootstrap 3中更改textarea的焦点发光?

来自分类Dev

如何在Bootstrap 3中更改行的颜色?

来自分类Dev

如何在ASP.NET中更改Bootstrap CSS文件?

来自分类Dev

如何在Bootstrap中更改字形的内部颜色?

来自分类Dev

如何在Bootstrap Vue中更改箭头颜色?

来自分类Dev

如何在Bootstrap 4.2中更改<fieldset>的边框?

来自分类Dev

如何在Bootstrap的此导航栏中更改文本的颜色?

来自分类Dev

如何在Bootstrap 3.3.6导航栏中更改悬停颜色?

来自分类Dev

Bootstrap 如何更改表格中链接的样式?

来自分类Dev

如何在我们的JavaScript中触发Bootstrap

来自分类Dev

我如何在Bootstrap 4 Card Header中对齐项目

来自分类Dev

模型更改时如何将值保留在禁用的输入控件中?

来自分类Dev

我应该如何在新的Yeoman项目中更改Bootstrap CSS属性?

来自分类Dev

如何在jQuery Bootstrap DataTables插件中居中分页?

来自分类Dev

如何在ES6中调用bootstrap的jQuery插件

来自分类Dev

如何在Jquery和Bootstrap中制作自动滚动页面

来自分类Dev

如何在Angular2中使用bootstrap / jquery

Related 相关文章

  1. 1

    jQuery Bootstrap MultiSelect OptGroup选择

  2. 2

    如何在更改时获取Bootstrap Datepicker的年份和月份

  3. 3

    如何在jQuery中更改bootstrap glyphicon颜色

  4. 4

    如何更改Bootstrap已禁用按钮的颜色?

  5. 5

    如何在Bootstrap中更改btn颜色

  6. 6

    表单中没有更改时如何禁用按钮[更新]

  7. 7

    Bootstrap 2.3.2-更改时将填充JQuery国家/地区

  8. 8

    如何在jQuery MultiSelect中更改选定的文本值

  9. 9

    如何在“ percentValue”更改时禁用sap.m.ProgressIndicator中的动画?

  10. 10

    如何在python中更改时间?

  11. 11

    如何在JavaScript中更改时区?

  12. 12

    如何在Twitter Bootstrap 3中更改div col顺序

  13. 13

    如何在Bootstrap 3中更改textarea的焦点发光?

  14. 14

    如何在Bootstrap 3中更改行的颜色?

  15. 15

    如何在ASP.NET中更改Bootstrap CSS文件?

  16. 16

    如何在Bootstrap中更改字形的内部颜色?

  17. 17

    如何在Bootstrap Vue中更改箭头颜色?

  18. 18

    如何在Bootstrap 4.2中更改<fieldset>的边框?

  19. 19

    如何在Bootstrap的此导航栏中更改文本的颜色?

  20. 20

    如何在Bootstrap 3.3.6导航栏中更改悬停颜色?

  21. 21

    Bootstrap 如何更改表格中链接的样式?

  22. 22

    如何在我们的JavaScript中触发Bootstrap

  23. 23

    我如何在Bootstrap 4 Card Header中对齐项目

  24. 24

    模型更改时如何将值保留在禁用的输入控件中?

  25. 25

    我应该如何在新的Yeoman项目中更改Bootstrap CSS属性?

  26. 26

    如何在jQuery Bootstrap DataTables插件中居中分页?

  27. 27

    如何在ES6中调用bootstrap的jQuery插件

  28. 28

    如何在Jquery和Bootstrap中制作自动滚动页面

  29. 29

    如何在Angular2中使用bootstrap / jquery

热门标签

归档