【问题标题】:Disable a specific option boostrap-multiselect禁用特定选项 bootstrap-multiselect
【发布时间】:2015-03-18 08:37:30
【问题描述】:

问题

我想用 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 = $('#sel_priLang option:selected').val();

【问题讨论】:

    标签: javascript bootstrap-multiselect


    【解决方案1】:

    简单说明一下:禁用相应的复选框并将.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>
    

    【讨论】:

      【解决方案2】:

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

      • 捕获选择事件以选择全部
      • 迭代元素
      • 删除禁用元素的选中属性

      类似于捕获更改、查找禁用和取消选中它们:

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

      【讨论】:

      • 嘿,成功了!但是我很生气它没有按照我想要的方式工作,所以我尝试禁用类而不是输入。那行得通。如果有兴趣,请检查问题。
      猜你喜欢
      • 2017-09-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-06-21
      • 2015-09-24
      • 2016-02-26
      相关资源
      最近更新 更多