Disable button depending on select option using jquery?

Question

On selecting option 1 the button must be disabled, enable the button when remaining options are selected.

$(document).ready(function(){
  if($("option[value='1']")){
     $("button").prop('disabled',true);
    }
  else{
    $("button").prop('disabled',false);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="opt">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<button>button</button>

It's easy. It must be disabled when there is an attribute `disabled` whatever it has value. — Anson, Dec 07 '16 at 09:18

Pranav C Balan · Accepted Answer · 2016-12-07T09:25:24.477

In your code $("option[value='1']") would return a jQuery object which is truthy always so that if statement doesn't make any sense. Although your code only runs once when the page is loaded.

You need to bind a change event handler to update the button based on the current value.

$(document).ready(function() {
  // bind change event handler
  $('#opt').change(function() {
    // update disabled property
    $("button").prop('disabled', this.value == 1);
    // trigger change event to set initial value
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="opt">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<button>button</button>

guradio · Answer 2 · 2016-12-07T09:23:41.823

$(document).ready(function() {
  $('#opt').change(function() {
    $("button").prop('disabled', $(this).val() == 1);//will disable if current value is equals to 1

  }).change()

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="opt">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<button>button</button>

On change event check value of select then depending on value set the disable of button

score 0 · Answer 3 · edited May 23 '17 at 11:45

Try this. Remove attribute disabled when you want to show things. Read reference and see the following example.

$(document).ready(function(){
  $("button").prop('disabled',true);
  $('#opt').change(function(){
     if($(this).val()==1){
       $("button").attr('disabled','disabled');
      }
    else{
      $("button").removeAttr('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="opt">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<button>button</button>

score 0 · Answer 4 · answered Dec 07 '16 at 09:21

You can try like this

$(document).ready(function () {
        $("#opt").change(function () {
            if ($(this).val() == "1") {
                $("button").prop('disabled', true);
            }
            else {
                $("button").prop('disabled', false);
            }
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="opt">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<button disabled >button</button>

Disable button depending on select option using jquery?

4 Answers4