Skip to content

Commit

Permalink
#362.
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidstutz
davidstutz committed Aug 19, 2014
1 parent 5991dd3 commit 0399207
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 21 deletions.
39 changes: 31 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,6 @@ <h1>Bootstrap Multiselect</h1>
<p class="lead">
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>

<p>
Please have a look at the <a href="https://github.com/davidstutz/bootstrap-multiselect/blob/master/README.md">Contribution Guidelines</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
</p>
</div>
</div>

Expand All @@ -66,11 +62,15 @@ <h1>Bootstrap Multiselect</h1>
event.stopPropagation();
});
</script>

<p class="alert alert-info">
The demonstration page for Bootstrap 2.3.x was removed. Nevertheless, this page should be working with Bootstrap 2.3.x as well except for some methods which are marked accordingly.
</p>

<p class="alert alert-warning">
Please have a look at the <a href="https://github.com/davidstutz/bootstrap-multiselect/blob/master/README.md">Contribution Guidelines</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
</p>

<div class="page-header">
<h1><a id="getting-started"></a>Getting Started</h1>
</div>
Expand Down Expand Up @@ -987,6 +987,12 @@ <h1><a id="options"></a>Options</h1>
</pre>
</td>
</tr>
<tr>
<td><code>checkboxName</code></td>
<td>
Per default, this option is set to <code>false</code> and the generated checkboxes (or radio buttons) are not given any name. If not set to <code>false</code>, this option defines the name of all checkboxes (or radio buttons).
</td>
</tr>
<tr>
<td><code>includeSelectAllOption</code></td>
<td>
Expand Down Expand Up @@ -1459,15 +1465,17 @@ <h1><a id="methods"></a>Methods</h1>
</pre>
</td>
<td>
<select id="example49" multiple="multiple"></select>
<select id="example50" multiple="multiple"></select>
<div class="btn-group">
<select id="example49" multiple="multiple"></select>
<select id="example50" multiple="multiple"></select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<p><code>.multiselect('setOptions', options)</code></p>
<p>
Used to change configuration after initializing the multiselect. This may be useful in combination with <code>.multiselect('rebuild')</code>.
Used to change configuration after initializing the multiselect. This may be useful in combination with <code>.multiselect('rebuild')</code>. See the <a href="#further-examples">Further Examples</a> section for an example.
</p>
</td>
</tr>
Expand Down Expand Up @@ -2593,6 +2601,21 @@ <h1><a id="faq"></a>Frequently Asked Questions</h1>
<p>
Have a look at the <a href="#further-examples">Further Examples</a> section (in addition, issue <a target="_blank" href="https://github.com/davidstutz/bootstrap-multiselect/issues/360">360</a> discussed this).
</p>

<p>
<b>Using multiple <code>select</code>'s in single selection mode with <code>option</code>'s sharing values across the different <code>select</code>'s.</b>
</p>
<p>
This issue is discussed in detail here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/362">#362</a>. A simple solution is to use different option values for the option <code>checkboxName</code>:
</p>
<pre class="prettyprint linenums">
$('.multiselect').multiselect({
checkboxName: _.uniqueId('multiselect_')
});
</pre>
<p>
where <code>_.uniqueId('multiselect_')</code> should be replaced with a random generator. Alternatively, a unique value for <code>checkboxName</code> can be used for each multiselect.
</p>
</div>

<div class="container">
Expand Down
41 changes: 28 additions & 13 deletions js/bootstrap-multiselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@
// Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false,
checkboxName: 'multiselect',
checkboxName: false,
includeSelectAllOption: false,
includeSelectAllIfMoreThan: 0,
selectAllText: ' Select all',
Expand Down Expand Up @@ -546,8 +546,14 @@

var $li = $(this.options.templates.li);
$('label', $li).addClass(inputType);
$('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />');


if (this.options.checkboxName) {
$('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />');
}
else {
$('label', $li).append('<input type="' + inputType + '" />');
}

var selected = $(element).prop('selected') || false;
var $checkbox = $('input', $li);
$checkbox.val(value);
Expand Down Expand Up @@ -631,8 +637,14 @@

var $li = $(this.options.templates.li);
$('label', $li).addClass("checkbox");
$('label', $li).append('<input type="checkbox" name="' + this.options.checkboxName + '" />');


if (this.options.checkboxName) {
$('label', $li).append('<input type="checkbox" name="' + this.options.checkboxName + '" />');
}
else {
$('label', $li).append('<input type="checkbox" />');
}

var $checkbox = $('input', $li);
$checkbox.val(this.options.selectAllValue);

Expand Down Expand Up @@ -791,7 +803,7 @@
var $checkbox = this.getInputByValue(value);

if($option === undefined || $checkbox === undefined) {
continue;
continue;
}

if (!this.options.multiple) {
Expand Down Expand Up @@ -845,7 +857,7 @@
var $checkbox = this.getInputByValue(value);

if($option === undefined || $checkbox === undefined) {
continue;
continue;
}

if (this.options.selectedClass) {
Expand Down Expand Up @@ -901,7 +913,7 @@
var justVisible = typeof justVisible === 'undefined' ? true : justVisible;

if(justVisible) {
var visibleCheckboxes = allCheckboxes.filter(":visible");
var visibleCheckboxes = $("li input[type='checkbox']:enabled", this.$ul).filter(":visible");
visibleCheckboxes.prop('checked', false);

var values = visibleCheckboxes.map(function() {
Expand All @@ -912,14 +924,17 @@
return $.inArray($(this).val(), values) !== -1;
}).prop('selected', false);

$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
if (this.options.selectedClass) {
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
}
}
else {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
allCheckboxes.prop('checked', false);

$("li input[type='checkbox']:enabled", this.$ul).prop('checked', false);
$("option:enabled", this.$select).prop('selected', false);
$("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);

if (this.options.selectedClass) {
$("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
}
}
},

Expand Down

0 comments on commit 0399207

Please sign in to comment.