Toggle disabled attribute if select box option has value

Question

I have a submit button that's disabled by default and has a grayed out image in the src attribute.

Here's the HTML:

<form>
<select id="item_location">
    <option value="">- Choose Destination -</option>
    <option value="US">US</option>
    <option value="CN">Canada</option>
    <option value="IN">International</option>
</select>

<input class="submit" type="image" src="http://website.com/images/btn_buynow_LG--disabled.png" border="0" name="submit" disabled>
</form>

By default, the user must select the country. When a country is selected that has a value, I'd like to update the image and remove the disabled attribute as long as the value of the dropdown option isn't blank.

Here's the jQuery I've come up with so far but it needs to toggle the disabled attribute based on the value of the select item_location select box.

function submitButton() {
    jQuery(".submit").change(function() {
        if (jQuery("#item_location") !== "" {
            jQuery(".submit").attr("src", "http://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif").removeAttr("disabled");     
        });
    });
}

palaѕн · Accepted Answer · 2013-11-07T13:43:15.617

1

You can do this:

jQuery(".submit").prop("disabled", jQuery("#item_location").val() === "")

This will disable the submit, in case the item_location value is empty, else enabled.

UPDATE

// Cache the submit button
var $submit = jQuery(".submit");

// Disable the button based on the dropdown value
$submit.prop("disabled", jQuery("#item_location").val() === "");

// Change the src image, based on disabled attribute of submit button
$submit.prop("src", function (i, val) {
    return $submit.prop("disabled") ? 'old_image_src' : 'new_image_src';
});

edited Nov 07 '13 at 13:43

answered Nov 07 '13 at 13:24

palaѕн

72,112
17
116
136

How do I add to this that when the disabled attribute is removed, I need to change the src image? – micah Nov 07 '13 at 13:38
I've tried your updated method here: http://codepen.io/anon/pen/yHxtp and I can't get it to work either. :/ – micah Nov 07 '13 at 13:48
Okay, I do see it working properly on the fiddle. But why is it giving me this console error: `Uncaught TypeError: Property '$' of object [object Object] is not a function`? – micah Nov 07 '13 at 13:53
I think, since you are using `jQuery` as alias, but in the fiddle I am using `$`. Try adding `var $ = jQuery;` at the top and try again.. – palaѕн Nov 07 '13 at 13:57

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

use .val() to get selected value of drop-down list

if (jQuery("#item_location").val() !== "") {
                             ^           ^ //added ) here

or better use .prop()

jQuery(".submit").prop("disabled", jQuery("#item_location").val() === "")

Read .prop() vs .attr()

Updated after OP's comment

jQuery(".submit").prop("src", "http://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif");

edited May 23 '17 at 12:13

Community

1
1

answered Nov 07 '13 at 13:23

Tushar Gupta - curioustushar

58,085
24
103
107

What about changing the default image? I have a grayed out image that needs to be present only when the submit button has disabled attribute. – micah Nov 07 '13 at 13:28
So I would need two `.prop()` methods? – micah Nov 07 '13 at 13:34

Anil kumar · Answer 3 · 2013-11-07T13:44:43.423

0

Try this.

jQuery("#item_location").change(function() {
    if (this.value) {
        jQuery(".submit").prop("src", "http://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif").removeAttr("disabled"); 
    }

})

edited Nov 07 '13 at 13:44

answered Nov 07 '13 at 13:24

Anil kumar

4,107
1
21
36

no errors. Just nothing happens when I select one of the countries. – micah Nov 07 '13 at 13:41
Strage. I can get it to work here:http://codepen.io/anon/pen/xGtLq but not in my original code. Is there a way to toggle back the disabled attribute if the value goes back to nothing? – micah Nov 07 '13 at 13:54

Toggle disabled attribute if select box option has value

3 Answers3