Question

Bootstrap multi select

中的问题

我无法看到如何使用bootstrap multi select在多选下拉列表中启用/禁用特定选项。我尝试使用http://davidstutz.github.io/bootstrap-multiselect/

任何解决方案？

Answer 1

假设ddl1是您正在处理的下拉控件的ID，

这就是你应该如何在你的HTML中创建控件（再次假设你使用的是MVC Razor）

@Html.DropDownListFor(m => m.MyModelObj, Model.MyModelObjs, new { @class = "form-control", id = "ddl1", multiple = "multiple", placeholder = "Select" })

这就是你将bootstrap multiselect插件应用到下拉列表中的方法

$('#ddl1').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            enableFiltering: true,
            includeSelectAllOption: true,
            nonSelectedText: 'Select',
            enableCaseInsensitiveFiltering: true,
            selectAllNumber: true,
            onChange: function(option, checked,select) {
                FillOtherDropdown();
                },
                onSelectAll: function(){
                $("#ddl2").html("");
                $('#ddl2').multiselect('refresh' );
                $("#ddl2").multiselect('disable');}
});

可以如上所示应用所有属性，即PropertyName : Value

Answer 2

您是否尝试将禁用属性添加到要禁用的选项，如下所示

＆＃13;

<!doctype html>
<html>
	<head>
		<title>Test</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
	</head>
	<body>
		<select>
            <option>Select</option>
			<option disabled>value</option>
			<option>value</option>
			<option>value</option>
			<option disabled>value</option>
			<option>value</option>
			<option>value</option>
		</select>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('select').multiselect();
			});
		</script>
	</body>
</html>

＆＃13;

Answer 3

只需在您定位的选项中添加禁用属性即可轻松实现： -

＆＃13;

    $(document).ready(function() {
      $('#lstFruits').multiselect({
        includeSelectAllOption: true
      });
      $('#example-enableClickableOptGroups-disabled').multiselect();
    });

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>!-->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
  <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js">
  </script>
  
</head>

<body>
  <br />
  <select id="lstFruits" multiple="">
    <option value="1">Mango</option>
    <option value="2">Apple </option>
    <option value="3">Banana </option>
    <option value="4">Guava </option>
    <option value="5">Orange </option>
  </select>
  <br/>
  <label>with disabled options</label> <br/>
  <select id="example-enableClickableOptGroups-disabled" multiple="multiple">
    <option value="1-1" disabled="">Option 1.1</option>
    <option value="1-2">Option 1.2</option>
    <option value="1-3">Option 1.3</option>
    <option value="2-1" disabled="">Option 2.1</option>
    <option value="2-2">Option 2.2</option>
    <option value="2-3">Option 2.3</option>
  </select>
</body>

</html>

＆＃13;

这是一个完整的Demo

希望能帮助。

bootsratp multiselect js中的问题

Bootstrap multi select

3 个答案: