Attempted many times to limit selected value to 1 if certain radio button is selected using multiselect bootstrap plugin but no use

Question

I have 5 roles with radio button. So if role roleA,B selected user, it automatically selects all values but if we check roleC, it only allows to select one value.Role D,E could select as many value they want.However, I am having issue with RoleC set-up. So Role C is only allowed to select one value but when I go back to Role E,C, the checkbox would be frozen as it was selected RoleC. I don't know what am I doing wrong. Help!

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

$(document).ready(function () {

$("#input-user-market").multiselect('select', String | Array, { includeSelectAllOption: true, enableFiltering: true, nonSelectedText: '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

Here you go with the solution 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>

I just modified the code a bit.