Jquery enable/disable button based on select option

Question

Is it possible to enable or disable a button which is in a form, based on a select (drop down) option which isn't in a form? I don't have any code, I will have it (or not) based on your answer to my question :D

Yes it is possible. I don't have any answer till I don't see any code. — Koste
– Koste, Commented Jul 5, 2012 at 14:09
No, no, guys, easy, I don't expect you to work for me, just wanted to know is it possible. — itsamemario
– itsamemario, Commented Jul 5, 2012 at 14:11

Blazemonger · Accepted Answer · 2012-07-05 14:14:24Z

9

A quick demonstration: http://jsfiddle.net/mblase75/vZacx/

$('#picker').on('change', function() {
    $('#' + $(this).val()).prop('disabled', false)
        .siblings().prop('disabled', true);
});

answered Jul 5, 2012 at 14:14

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

Comments

elvenbyte · Accepted Answer · 2012-07-05 14:08:33Z

2

Just put your code disabling/enabling the button in the change event of the drop down.

answered Jul 5, 2012 at 14:08

elvenbyte

7741 gold badge17 silver badges34 bronze badges

Comments

adeneo · Accepted Answer · 2012-07-05 14:20:21Z

2

Something like this maybe :

$("select").on('change', function() {
    $('button').prop('disabled', this.value==='EnabledOptionValue'?false:true);
});

FIDDLE

answered Jul 5, 2012 at 14:20

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Ohgodwhy · Accepted Answer · 2012-07-05 14:12:02Z

1

$('select').change(function(){
  var theVal = $(this).val();
  switch(theVal){
    case '0':
      $('#theButton').prop('disabled', true);
      break;
    case '1':
      $('#theButton').prop('disabled', false);
      break;
  }
});

Working jsFiddle

answered Jul 5, 2012 at 14:12

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Comments

Porta Shqipe · Accepted Answer · 2015-04-26 08:39:33Z

1

<script type="text/javascript">
$(document).ready(function() {
$("#demo_button").button({icons: {secondary: "ui-icon-info"}});
$("#demoSelect").addClass("ui-state-default ui-corner-all");
var demoSelectValue = $("#demoSelect").val();
if (demoSelectValue == "0") {
$("#demo_button").button("disable")
}
$("#demoSelect").change(function(){
if($(this).val() == "0"){
$("#demo_button").button("disable")
}
else {
$("#demo_button").button("enable")
}
});
});
</script>

HTML:

<select name="demoSelect" id="demoSelect">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<button id="demo_button" style="float:right;">button</button>

jsFiddle demo

see jsFiddle

answered Apr 26, 2015 at 8:39

Porta Shqipe

8668 silver badges8 bronze badges

Comments

Ryan Amies · Accepted Answer · 2012-07-05 14:11:32Z

0

$('#Select').change(function(){
    //Some condition
    $('#Button').attr('disabled','disabled');
});

answered Jul 5, 2012 at 14:11

Ryan Amies

4,9421 gold badge24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Jquery enable/disable button based on select option

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related