禁用特定选项bootstrap-multiselect

时间:2015-02-10 15:18:05

标签: javascript bootstrap-multiselect


问题

我想用JS禁用一个选项。我尝试使用以下代码:

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

它有点工作,但问题是我仍然可以使用全选按钮启用该选项。 另外,不确定是否相关,我从另一个多选中执行onChange中的代码。

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

希望这个解释很清楚,第一个问题; D。


答案

虽然乔的答案有效但我自己试了一下,为了禁用:

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

启用:

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

只是输入的值     selectedPriLang = $(&#39; #sel_priLang选项:已选择&#39;)。val();

2 个答案:

答案 0 :(得分:4)

只需快速说明一下:禁用相应的复选框并将.disabled类添加到相应的li是不够的。您还必须禁用基础option。示例(也可以在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>

答案 1 :(得分:0)

您必须在自己的on-change处理程序中处理已禁用的事件,并在选择all-all时取消选择它们。通常,过程可能如下所示:

  • 捕获选择事件以选择所有
  • 迭代元素
  • 删除已禁用元素的已检查属性

捕捉变化,找到禁用和取消选中它们的东西:

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