代码之家  ›  专栏  ›  技术社区  ›  Gerle Batde

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

  •  0
  • Gerle Batde  · 技术社区  · 7 年前

    我有5个单选按钮角色。因此,如果角色roleA,B选择了用户,它会自动选择所有值,但如果我们选中roleC,它只允许选择一个值。角色D、E可以选择他们想要的任意多个值。然而,我对RoleC的设置有意见。因此,角色C只允许选择一个值,但当我返回到角色E,C时,复选框将被冻结,因为它被选中了RoleC。我不知道我做错了什么。帮助

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

    includeSelection:true, enableFiltering:true, 非选定文本:“选中一个选项!”

        $('.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/

    1 回复  |  直到 7 年前
        1
  •  0
  •   Shiladitya    7 年前

    给你答案 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>