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

Answer 1

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>