複数選択ブートストラッププラグインを使用して特定のラジオボタンを選択しても使用しない場合は、選択した値を1に制限しようと何度も試みました。

Question

ラジオボタンで5つの役割があります。したがって、roleA、Bが選択されたユーザーの場合、自動的にすべての値が選択されますが、roleCをチェックすると1つの値しか選択できません.RoleD、Eは、必要な数だけ値を選択できます。ただし、アップ。したがって、ロールCは1つの値を選択することのみが許可されますが、ロールE、Cに戻ると、チェックボックスはロールCとして選択されたまま固定されます。私は何が間違っているのか分かりません。助けて！

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

$（ドキュメント）.ready（関数（）{

$（ "＃入力ユーザー市場"）複数選択（ '選択'、文字列|アレイ、{ includeSelectAllOption：。本当、 enableFiltering：真、 nonSelectedText： 'オプションをチェックしてください！' }）;

$('.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() { 
 
\t $("#input-user-market").multiselect('select', String | Array, { 
 
    includeSelectAllOption: true, 
 
    enableFiltering: true, 
 
    nonSelectedText: 'Check an option!' 
 
\t }); 
 
    
 
    var radioButton; 
 

 
    $('.checks').change(function() { 
 
\t \t radioButton = $('.checks:checked').val(); 
 
    $('#input-user-market option:selected').each(function() { 
 
     $(this).prop('selected', false); 
 
    }); 
 
    $('#input-user-market').multiselect('refresh'); 
 
\t \t 
 
    if (radioButton == "RoleA" || radioButton == "RoleB") { 
 
    \t $('#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>

溶液で行きます。