How To Disable Select Option Based On Another Select Option

Scenario: I am selling a T-shirt in pink, navy, black and size small, medium and large. I've got two selection boxes, one for color and the other for size. I'm sold out of medium p

Solution 1:

Try this:

$('#color').change(function(e){
  if($(this).val() == "Pink"){
     $("#size option[value='Medium']").prop('disabled',true);
   }
  else {
    $("#size option[value='Medium']").prop('disabled',false);
  }
});

Use 'prop' instead of 'attr'.

Demo:

http://jsfiddle.net/59knw46r/

Solution 2:

Here is an alternative method:

functionenableElements() {

if ($('#color').val() == "pink") {
    $("#size").children().each(function() {
        if ($(this).val() == 'medium') {
            $(this).prop('disabled',true);
        }
    });
} else {
    $("#size").children().each(function() {
        if ($(this).val() == 'medium') {
            $(this).prop('disabled',false);
        }
    });
}

}

Solution 3:

a better , or i can say a faster approach would be as following snippet.

$("#size").find("option[value='Medium']").prop('disabled',true)