Pomoc pri programovaní, odpovede na otázky / html / Problém v bootsratp multiselect js - html, css, bootstrap-multiselect

Vydanie v bootsratp multiselect js - html, css, bootstrap - multiselect

Problém v programe Bootstrap multi select

Môžem "t vidieť, ako povoliť / zakázať konkrétnu možnosť v multi vyberte drop-down pomocou bootstrap multi select. Snažil som sa použiť http://davidstutz.github.io/bootstrap-multiselect/

Akékoľvek riešenie?

odpovede:

1 pre odpoveď č. 1

Za predpokladu, ddl1 je ID rozbaľovacej kontroly, na ktorej pracujete,

Takto by ste mali vytvoriť kontrolu vo vašom HTML(opäť za predpokladu, že používate MVC Razor)

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

a to je to, ako aplikujete bootstrap multiselect plugin do rozbaľovacieho zoznamu

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

Všetky vlastnosti môžu byť aplikované tak, ako je uvedené vyššie, t.j. PropertyName : Value

0 pre odpoveď č. 2

Skúšali ste pridať zakázaný atribút do voľby, ktorú chcete zakázať, ako je uvedené nižšie

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

0 pre odpoveď č. 3

Je to tak jednoduché pridaním zakázaného atribútu k možnosti, na ktorú zacieľujete: -

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

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

a Tu je plný demonštrácie

Dúfam, že to pomôže.