【问题标题】:Toggle disabled attribute if select box option has value如果选择框选项具有值,则切换禁用属性
【发布时间】:2013-11-19 03:59:27
【问题描述】:

我有一个默认禁用的提交按钮,并且在 src 属性中有一个灰色的图像。

这是 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>

默认情况下,用户必须选择国家。 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.

这是我到目前为止提出的 jQuery,但它需要根据选择 item_location 选择框的值来切换禁用属性。

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");     
        });
    });
}

【问题讨论】:

    标签: javascript jquery html forms


    【解决方案1】:

    试试这个。

    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"); 
        }
    
    })
    

    【讨论】:

    • 没有错误。当我选择其中一个国家/地区时,什么都没有发生。
    • 战略。我可以让它在这里工作:codepen.io/anon/pen/xGtLq 但不是在我的原始代码中。如果值恢复为空,有没有办法切换回禁用的属性?
    【解决方案2】:

    你可以这样做:

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

    这将禁用submit,以防item_location 值为空,否则启用。

    更新

    // 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';
    });
    

    【讨论】:

    • 我该如何添加,当禁用属性被删除时,我需要更改 src 图像?
    • 我已经在这里尝试了您的更新方法:codepen.io/anon/pen/yHxtp,我也无法让它工作。 ://
    • 好的,我确实看到它在小提琴上正常工作。但是为什么它给我这个控制台错误:Uncaught TypeError: Property '$' of object [object Object] is not a function
    • 我认为,因为您使用jQuery 作为别名,但在小提琴中我使用的是$。尝试在顶部添加var $ = jQuery;,然后重试..
    • 好的,解决了。谢谢!
    【解决方案3】:

    使用.val()获取下拉列表的选中值

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

    或者更好地使用.prop()

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

    阅读.prop() vs .attr()


    OP评论后更新
    jQuery(".submit").prop("src", "http://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif");
    

    【讨论】:

    • 更改默认图像怎么样?我有一个灰显的图像,只有在提交按钮具有禁用属性时才需要显示。
    • 所以我需要两个.prop() 方法?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-07-12
    • 1970-01-01
    • 1970-01-01
    • 2020-06-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多