Jquery Disable enable button, dropdown selections

Question

I have a dropdown menu and I want to disable/enable a button on my page when a certain value is selected. It works in all browsers but IE7 and below. Is there a work around?

Code:

<script type="text/javascript">
$(document).ready(function() {

//Start Buttons
        $(".nextbutton").button({ disabled: true });
        (".nextbutton").click(function() { $("#phonetypeform").submit() });

//Enable Next Step
    $('.enablenext').click(function(){
            $(".nextbutton").button("enable");
                }); 

//Disable Next Step
    $('.disablenext').click(function(){
            $(".nextbutton").button("disable");
                }); 

});
</script>

<form>
      <select name="porting-p1"class="dropdown">
<option value="" class="disablenext">Please select an option...</option>
<option value="1" class="enablenext">I want to keep my current phone number</option>
<option value="2" class="enablenext">I want to choose a new number</option>
        </select>

</form>

<button class="nextbutton">Next Step</button>

It looks like you're using a jQuery plugin - .button() is not part of the standard API. I'm not sure which plugin might be providing this for you, but it's possible that the plugin itself isn't written for maximum IE-friendliness. — Matt Ball
– Matt Ball, Commented Sep 20, 2010 at 14:19

irishbuzz · Accepted Answer · 2010-09-20 14:50:25Z

2

IE7 doesn't seem to like the click event on <option> tags.

Here's a short demo that should work for you using the change() event instead.

$(document).ready(function() {

    $(".nextbutton").button({ disabled: true });

    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
            $(".nextbutton").button({ disabled: true });
        } else {
            $(".nextbutton").button({ disabled: false });
        }
    });

});

edited Sep 20, 2010 at 14:50

answered Sep 20, 2010 at 14:42

irishbuzz

2,4601 gold badge19 silver badges16 bronze badges

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

Comments

DannyLane · Accepted Answer · 2010-09-20 14:19:04Z

1

Have you tried

$(".nextbutton").attr("disabled", "disabled");

and

$(".nextbutton").removeAttr("disabled");

?

HTH

answered Sep 20, 2010 at 14:19

DannyLane

2,0961 gold badge16 silver badges17 bronze badges

Collectives™ on Stack Overflow

Jquery Disable enable button, dropdown selections

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related