如果使用 multiselect bootstrap 插件选择了某个单选按钮但没有用，则多次尝试将所选值限制为 1

Question

我有 5 个带单选按钮的角色。因此，如果角色 roleA,B selected 用户，它会自动 selects 所有值但是如果我们检查 roleC，它只允许 select 一个 value.Role D,E 可以 select 与他们 want.However 一样多的价值，我对 RoleC 设置有疑问。所以角色 C 只允许 select 一个值，但是当我返回角色 E、C 时，复选框将被冻结，因为它是 select 角色 C。我不知道我做错了什么。帮助！

here is the code with jsFiddle https://jsfiddle.net/1ar5g43g/1/

$(文档).ready(函数(){

$("#input-user-market").multiselect('select', 字符串 | 数组, { includeSelectAllOption：真， 启用过滤：真， 非选定文本：'Check an option!' });

    $('.checks').change(

        function () {


            var radioButton = $('.checks:checked').val();

            if (radioButton == "RoleA" || radioButton == "RoleB") {


                $('#input-user-market').multiselect('refresh', false);
            $('#input-user-market').multiselect('selectAll', false);
            $('#input-user-market').multiselect('updateButtonText', false);

            } else


                if (radioButton == "RoleC") {

                    $("#input-user-market").on("change", function () {
                        var selectedOptions = $('#input-user-market option:selected');

                        if ((selectedOptions.length = 1) && (selectedOptions.length = 1)) {
                            // Disable all other checkboxes.
                            var nonSelectedOptions = $('#input-user-market option').filter(function () {
                                return !$(this).is(':selected');
                            });

                            var dropdown = $('#input-user-market').siblings('.multiselect-container');
                            nonSelectedOptions.each(function () {
                                var input = $('input[value="' + $(this).val() + '"]');
                                input.prop('disabled', true);
                                input.parent('li').addClass('disabled');
                            });
                        }
                        else if (selectedOptions.length <= 1) {
                            var SelectedOptions = $('#input-user-market option').filter(function () {
                                console.log("1 select")
                                return $(this).is(':selected');
                            });
                            var dropdown = $('#input-user-market').siblings('.multiselect-container');
                            SelectedOptions.each(function () {
                                var input = $('input[value="' + $(this).val() + '"]');
                                input.prop('disabled', true);
                                input.parent('li').addClass('disabled');
                            });
                        }
                        else {
                            // Enable all checkboxes.
                            var dropdown = $('#input-user-market').siblings('.multiselect-container');
                            $('#input-user-market option').each(function () {
                                var input = $('input[value="' + $(this).val() + '"]');
                                input.prop('disabled', false);
                                input.parent('li').addClass('disabled');
                            });
                        }
                    });




    }



            else {



                $('#input-user-market option:selected').each(function () {
                    $(this).prop('selected', false);
                });
                    $('#input-user-market').multiselect('refresh');




            }
        }


    )




});

https://jsfiddle.net/1ar5g43g/1/

Answer 1

给你解决方案https://jsfiddle.net/1ar5g43g/7/

$(document).ready(function () {
 $("#input-user-market").multiselect('select', String | Array, {
    includeSelectAllOption: true,
    enableFiltering: true,
    nonSelectedText: 'Check an option!'
 });
  
  var radioButton;

  $('.checks').change(function () {
  radioButton = $('.checks:checked').val();
    $('#input-user-market option:selected').each(function () {
      $(this).prop('selected', false);
    });
    $('#input-user-market').multiselect('refresh');
  
    if (radioButton == "RoleA" || radioButton == "RoleB") {
     $('#input-user-market').multiselect('selectAll', false);
      $('#input-user-market').multiselect('updateButtonText', false);
    }
  });
  
  $("#input-user-market").on("change", function () {
    var selectedOptions = $('#input-user-market option:selected');

    if ( radioButton == "RoleC" && selectedOptions.length === 1) {
        // Disable all other checkboxes.
 
        var nonSelectedOptions = $('#input-user-market option').filter(function () {
            return !$(this).is(':selected');
        });

        var dropdown = $('#input-user-market').siblings('.multiselect-container');
        nonSelectedOptions.each(function () {
            var input = $('input[value="' + $(this).val() + '"]');
            input.prop('disabled', true);
            input.parent('li').addClass('disabled');
        });
    } else if( radioButton == "RoleC"){
      // Enable all checkboxes.
      var dropdown = $('#input-user-market').siblings('.multiselect-container');
      $('#input-user-market option').each(function () {
          var input = $('input[value="' + $(this).val() + '"]');
          input.prop('disabled', false);
          input.parent('li').removeClass('disabled');
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  
  <form class="form-horizontal" id="user-form">
  

  
  <div class="form-group">
                        <label for="input-user-role" class="col-lg-3 col-sm-3 col-md-3 control-label">Permissions</label>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                           
                                <div class="checkbox">
                                    <div>
                                        <input type="radio" class="checks "id="A" name="Role" value="RoleA" required data-msg="Please choose one role" />
                                        RoleA
                                    </div>
                                     <div>
                                        <input type="radio" class="checks "id="B" name="Role" value="RoleB" required data-msg="Please choose one role" />
                                        RoleB
                                    </div>
                                     <div>
                                        <input type="radio" class="checks "id="A" name="Role" value="RoleC" required data-msg="Please choose one role" />
                                        RoleC
                                    </div>
                                     <div>
                                        <input type="radio" class="checks "id="A" name="Role" value="RoleD" required data-msg="Please choose one role" />
                                        RoleD
                                    </div>
                                     <div>
                                        <input type="radio" class="checks "id="A" name="Role" value="RoleE" required data-msg="Please choose one role" />
                                        RoleE
                                    </div>
                                    
                                </div>
                            
                            <label for="Role" class="error block">Please choose one role.</label>
                        </div>
                    </div>
                    
                    
                    <div class="form-group">
                        <label for="input-user-market" class="col-lg-3 col-sm-3 col-md-3 control-label">Market</label>
                        <div class="col-lg-9 col-md-9 col-sm-9">



                            <select id="input-user-market" name="MarketIDs[]" multiple="multiple" class="multiselect-selected-text">
                   <option id="select-user-market" value="1">one</option>  
                    <option id="select-user-market" value="2">two</option>   
                     <option id="select-user-market" value="3">three</option>   
                      <option id="select-user-market" value="4">four</option>   
                       <option id="select-user-market" value="5">five</option>   
                                   
                               
                            </select>
                        </div>
                    </div>   
                      </form>

我只是稍微修改了一下代码。