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:
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)
Post a Comment for "How To Disable Select Option Based On Another Select Option"