Best IT Recipes

JQuery - disable selected options

You must disable the already selected options in the selection box using jQuery. I would like it to be saddled, asmselect .

Test my example here .

//JS $("#theSelect").change(function(){ var value = $("#theSelect option:selected").val(); var theDiv = $(".is" + value); theDiv.slideDown().removeClass("hidden"); }); $("div a.remove").click(function () { $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); }); //HTML <body> <div class="selectContainer"> <select id="theSelect"> <option value="">- Select -</option> <option value="Patient">Patient</option> <option value="Physician">Physician</option> <option value="Nurse">Nurse</option> </select> </div> <div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div> <div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Patient">remove</a></div> <div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Patient">remove</a></div> </body>​

UPDATED . Here the solution is completed. Thanks to Patrick and Simen.

+47
jquery html-select
May 19 '10 at 16:14
source share
4 answers

Add this line to your change event handler

  $("#theSelect option:selected").attr('disabled','disabled') .siblings().removeAttr('disabled');

This will disable the selected option and enable any previously disabled options.

EDIT:

If you do not want to reactivate the previous ones, simply delete this part of the line:

  .siblings().removeAttr('disabled');


EDIT:

http://jsfiddle.net/pd5Nk/1/

To turn it back on when you click the Delete button, add it to the click handler.

 $("#theSelect option[value=" + value + "]").removeAttr('disabled');
+85
May 19 '10 at 16:21
source share

This will disable / enable the parameters when they are selected / deleted, respectively.

 $("#theSelect").change(function(){ var value = $(this).val(); if (value === '') return; var theDiv = $(".is" + value); var option = $("option[value='" + value + "']", this); option.attr("disabled","disabled"); theDiv.slideDown().removeClass("hidden"); theDiv.find('a').data("option",option); }); $("div a.remove").click(function () { $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); $(this).data("option").removeAttr('disabled'); });

Demo: http://jsfiddle.net/AaXkd/

+6
May 19 '10 at 16:50
source share

It works:

 $("#theSelect").change(function(){ var value = $("#theSelect option:selected").val(); var theDiv = $(".is" + value); theDiv.slideDown().removeClass("hidden"); //Add this... $("#theSelect option:selected").attr('disabled', 'disabled'); }); $("div a.remove").click(function () { $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); //...and this. $("#theSelect option:disabled").removeAttr('disabled'); });
+3
May 19 '10 at 16:21
source share

Try it,

 $('#select_id option[value="'+value+'"]').attr("disabled", true);
+1
Dec 06 '16 at 17:10
source share


More articles:


All Articles