多选取消选择和禁用

Question

I Have 2 Multiple Select Field On My Code

I Want Make If All Selected Then Other Option Will Be Unselect And Disabled And Similarly If Other Any Field Selected Then All Option Will Unselect And Disabled

My Code Is

<select multiple name="device[]" id="device" class="form-control" >
  <option value=\'ALL\' selected="selected">ALL</option>
  <option value=\'Android\'>Android</option>
  <option value=\'iPod\'>iPod</option>
  <option value=\'iPad\'>iPad</option>
  <option value=\'Java\'>Java</option>
  <option value=\'Windows\'>Windows</option>
  <option value=\'Linux\'>Linux</option>
  <option value=\'Mac\'>Mac</option>
</select>

And

<select multiple name="country[]" id="device" class="form-control" >
  <option value=\'ALL\' selected="selected">ALL</option>
  <option value=\'BD\'>Bangladesh</option>
  <option value=\'IN\'>India</option>
  <option value=\'ID\'>Indonesia</option>
  <option value=\'NG\'>Naigeria</option>
  <option value=\'PK\'>Pakistan</option>
</select>

Answer 1

EDIT:

How about adding an extra button to reset the menus ? Please check this fiddle

OLD:

If you are not holding ctrl key then other options will be deselected automatically

 $(document).ready(function() { $('#device, #country').on('change', function() { var selectedVal = $(this).val(); for (var i = 0; i < selectedVal.length; i++) { if (selectedVal[i] === 'ALL') { // $("#device > option").attr('disabled','disabled'); $(this).find('option').attr('disabled', 'disabled'); $(this).find('option[value=ALL]').removeAttr('disabled'); } else { $(this).find('option[value=ALL]').attr('disabled', 'disabled'); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select multiple name="device[]" id="device" class="form-control"> <option value='ALL'>ALL</option> <option value='Android'>Android</option> <option value='iPod'>iPod</option> <option value='iPad'>iPad</option> <option value='Java'>Java</option> <option value='Windows'>Windows</option> <option value='Linux'>Linux</option> <option value='Mac'>Mac</option> </select> <select multiple name="country[]" id="country" class="form-control"> <option value='ALL'>ALL</option> <option value='BD'>Bangladesh</option> <option value='IN'>India</option> <option value='ID'>Indonesia</option> <option value='NG'>Naigeria</option> <option value='PK'>Pakistan</option> </select> 

Answer 2

  $('#device option').click(function(){ var Allselected = $('#device :selected').text(); var AllselectedCountry = $('#country :selected').text(); if(Allselected =="ALL"){ $('#device option:not(:selected)').addClass('ashClass'); } else if (Allselected !="ALL"){ $('#device option:first-child').css('color', '#ccc'); $('#device option:not(:selected)').removeClass('ashClass'); } }); $('#country option').click(function(){ var AllselectedCountry = $('#country :selected').text(); if(AllselectedCountry =="ALL"){ $('#country option:not(:selected)').addClass('ashClass'); } else if (AllselectedCountry !="ALL"){ $('#country option:first-child').css('color', '#ccc'); $('#country option:not(:selected)').removeClass('ashClass'); } }); 

 .ashClass { color: #ccc; } .blackClass { color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <select multiple name="device[]" id="device" class="form-control" > <option value=\\'ALL\\' >ALL</option><option value=\\'Android\\'>Android</option><option value=\\'iPod\\'>iPod</option><option value=\\'iPad\\'>iPad</option><option value=\\'Java\\'>Java</option><option value=\\'Windows\\'>Windows</option><option value=\\'Linux\\'>Linux</option><option value=\\'Mac\\'>Mac</option> </select> <select multiple name="country[]" id="country" class="form-control" > <option value=\\'ALL\\' >ALL</option><option value=\\'BD\\'>Bangladesh</option><option value=\\'IN\\'>India</option><option value=\\'ID\\'>Indonesia</option><option value=\\'NG\\'>Naigeria</option><option value=\\'PK\\'>Pakistan</option></select> 

Updated the codes,Hope this one resolves your problem. Is this what you are asking?

Answer 3

By disabling an element you say i'll not use this element, I refuse to use this elemen, so disabled elements can not get Mouse Events, so disabling is wrong way.

Instead make it visually disabled.

Here is pure JS code, because i am not like jquery ;)

 <style> select { height:300px; width:150px; } </style> <body> <select multiple name="device[]" id="device" class="form-control" onChange="Go()" > <option value=\\'ALL\\' selected="selected">ALL</option> <option value=\\'Android\\'>Android</option> <option value=\\'iPod\\'>iPod</option> <option value=\\'iPad\\'>iPad</option> <option value=\\'Java\\'>Java</option> <option value=\\'Windows\\'>Windows</option> <option value=\\'Linux\\'>Linux</option> <option value=\\'Mac\\'>Mac</option> </select> <select multiple name="country[]" id="device" class="form-control" onChange="Go()" > <option value=\\'ALL\\' selected="selected">ALL</option> <option value=\\'BD\\'>Bangladesh</option> <option value=\\'IN\\'>India</option> <option value=\\'ID\\'>Indonesia</option> <option value=\\'NG\\'>Naigeria</option> <option value=\\'PK\\'>Pakistan</option> </select> <script> function Go(){ parentElements = document.getElementsByTagName("select"); for(var i = 0; i < parentElements.length; i++){ parentElement = parentElements[i] children = parentElement.childNodes; for(var j = 0; j < children.length; j++){ childNode = children[j]; if(childNode.nodeName == "OPTION" || childNode.nodeName == "option"){ if(childNode.value == "\\\\'ALL\\\\'" && childNode.selected == true){ for(var k = 0; k < children.length; k++){ if(typeof(children[k].value) !== "undefined" && k != j){ children[k].style.color = "#ccc"; children[k].style.textDecorationLine = "line-through"; children[k].selected = false; } if(typeof(children[k].value) !== "undefined" && k == j){ children[k].style.color = ""; children[k].style.textDecorationLine = ""; } } } if(childNode.value != "\\\\'ALL\\\\'" && childNode.selected == true){ for(var k = 0; k < children.length; k++){ if(typeof(children[k].value) !== "undefined" && children[k].value == "\\\\'ALL\\\\'"){ children[k].style.color = "#ccc"; children[k].style.textDecorationLine = "line-through"; children[k].selected = false; } if(typeof(children[k].value) !== "undefined" && children[k].value != "\\\\'ALL\\\\'"){ children[k].style.color = ""; children[k].style.textDecorationLine = ""; } } } } } } } </script> </body>