Disable or enable checkbox on dropdown selection

Question

I have a drop-down with some entries and a checkbox.

If I've selected the 2nd entry in my drop-down, the checkbox should be enabled. Otherwise, it should be disabled and unchecked. I don't know how to deal with this.

This is what I got:

function checkSelected() {
    if (("#test").prop('selectedIndex') === 2) {
        //disable and uncheck
    } else {
        //enable
    }
}

HTML:

<select id="test">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<input id="test2" type="checkbox" name="test2">

Satpal · Accepted Answer · 2017-11-30 12:23:19Z

3

Bind change event to SELECT element and the use .prop( propertyName, value ) to manipulate properties.

$('#test').on('change', function() {
  if ($(this).prop('selectedIndex') === 2) {
    $('#test2').prop('disabled', true).prop('checked', false);
  } else {
    $('#test2').prop('disabled', false)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input id="test2" type="checkbox" name="test2">

answered Nov 30, 2017 at 12:23

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ItsOdi Over a year ago

Thanks a lot I'll try this and if it works I'll check your answer as the best ever heard ;)

Naren Murali · Accepted Answer · 2017-11-30 12:29:09Z

here is my solution.

First we disable the checkbox programmatically, then we watch for that value being selected and enable or disable the properties as per requirements.

Please let me know if this solves your issue!

var elem = $("#test2");
elem.attr("disabled", true);
elem.change(function(){
  if($(this).val() === "saab"){
    elem.attr("disabled", false);
  }else{
    elem.attr("disabled", true);
    elem.attr('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input id="test2" type="checkbox" name="test2">

Collectives™ on Stack Overflow

Disable or enable checkbox on dropdown selection

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related