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();

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();

• javascript
• bootstrap-multiselect

2 Answers 2

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>

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);
             });
        }
    });