我有这个HTML:

<input type="text" name="textField" />
<input type="submit" value="send" />

我怎么做这样的事情:

当文本字段为空时,提交应该被禁用(disabled="disabled")。 当在文本字段中键入内容以删除禁用属性时。 如果文本字段再次变为空(文本被删除),提交按钮应该再次禁用。

我是这样做的:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

但是不管用。什么好主意吗?


当前回答

我希望下面的代码能帮助到一些人!!:)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/

其他回答

上面的答案也没有处理基于菜单的剪切/粘贴事件的检查。下面是我用来做这两件事的代码。注意,动作实际上发生在超时时,因为剪切和过去事件实际上是在更改发生之前触发的,因此超时为更改的发生提供了一点时间。

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

我们可以简单地使用if & else。如果你的输入是空的,我们可以有

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

否则我们可以把false变成true

或者对于我们这些不喜欢用jQ处理每一件小事的人来说:

document.getElementById("submitButtonId").disabled = true;

如果按钮本身是一个jQuery样式的按钮(带有.button()),您将需要刷新按钮的状态,以便在删除/添加禁用属性后添加/删除正确的类。

$( ".selector" ).button( "refresh" );

它是这样工作的:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

确保在你的HTML中有一个“disabled”属性