Disable a specific option boostrap-multiselect

Question

Question

I want to disable a single option with JS. I tried using the following code:

var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
        input.prop('disabled', false);
        input.parent('li').addClass('disabled');

It kind of works, but the problem is I can still enable the option using the Select all button. Also, not sure if relevant, I execute the code in a onChange from a different multiselect.

<select id="sel_secLang" multiple="multiple">
        <option value="nlSec" disabled="disabled">Dutch</option>
        <option value="enSec">English</option>
        <option value="deSec">German</option>
        <option value="FrSec">French</option>
</select>

Hope this explanation is clear enough, first question ;D.

Answer

Although Joe's answer worked I tried it out myself, For disabling:

var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
input.prop('disabled', true);
var input2 = input.parent('label').parent('a').parent('li');
input4.removeClass('active');
input4.addClass('disabled');

For enabling:

var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
input.prop('disabled', false);
var input2 = input.parent('label').parent('a').parent('li');
input2.removeClass('disabled');

Just the value of the input selectedPriLang = $('#sel_priLang option:selected').val();

score 3 · Accepted Answer · answered Mar 18 '15 at 00:37

Just a quick note to clarify: disabling the corresponding checkbox and adding the .disabled class to the appropriate li is not sufficient. You also have to disable the underlying option. Example (can also be found in the documentation):

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-disable-javascript').multiselect({
            includeSelectAllOption: true
        });

        $('#example-disable-javascript-disable').on('click', function() {
            var input = $('#example-disable-javascript-container input[value="3"]');
            var option = $('#example-disable-javascript-container option[value="3"]');

            input.prop('disabled', true);
            option.prop('disabled', true);

            input.parent('label').parent('a').parent('li').addClass('disabled');
        });

        $('#example-disable-javascript-check').on('click', function() {
            var options = '';
            $('#example-disable-javascript option:selected').each(function() {
                options += $(this).val() + ', ';
            });

            alert(options.substr(0, options.length - 2));
        });
    });
</script>
<div class="btn-group" id="example-disable-javascript-container">
    <select id="example-disable-javascript" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
    <button id="example-disable-javascript-disable" class="btn btn-primary">Disable an option!</button>
    <button id="example-disable-javascript-check" class="btn btn-primary">Check</button>
</div>

score 0 · Answer 2 · answered Feb 10 '15 at 15:59

You'll have to process the disabled events in an on-change handler on you're own and de-select them when the select-all is picked. Generally the process could look like:

Capture on selection event for select all
Iterate on elements
Remove the checked attribute for the disabled elements

Something along the lines of capturing on change, find disabled, and unchecking them:

$('#sel_secLang').multiselect({
        onChange: function(option, checked, select) {
            $('input[type=checkbox]:disabled').each(checkbox, function(){
                 checkbox.attr('checked', false);
             });
        }
    });

Hey that worked! But I was irritated that it didn't work the way I wanted it to work, So I tried disabling the class instead of the input. That worked. Check the question if interested. — , Feb 11 '15 at 08:33

Disable a specific option boostrap-multiselect

Question

Answer

2 Answers2