我有这个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');
        }
    });
});

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


当前回答

请参阅下面的代码以启用或禁用提交按钮

如果名称和城市字段有值,那么只有提交按钮将被启用。

<script> $(document).ready(function() { $(':input[type="submit"]').prop('disabled', true); $('#Name').keyup(function() { ToggleButton(); }); $('#City').keyup(function() { ToggleButton(); }); }); function ToggleButton() { if (($('#Name').val() != '') && ($('#City').val() != '')) { $(':input[type="submit"]').prop('disabled', false); return true; } else { $(':input[type="submit"]').prop('disabled', true); return false; } } </script> <form method="post"> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <fieldset> <label class="control-label text-danger">Name</label> <input type="text" id="Name" name="Name" class="form-control" /> <label class="control-label">Address</label> <input type="text" id="Address" name="Address" class="form-control" /> <label class="control-label text-danger">City</label> <input type="text" id="City" name="City" class="form-control" /> <label class="control-label">Pin</label> <input type="text" id="Pin" name="Pin" class="form-control" /> <input type="submit" value="send" class="btn btn-success" /> </fieldset> </div> </div> </form>

其他回答

请参阅下面的代码以启用或禁用提交按钮

如果名称和城市字段有值,那么只有提交按钮将被启用。

<script> $(document).ready(function() { $(':input[type="submit"]').prop('disabled', true); $('#Name').keyup(function() { ToggleButton(); }); $('#City').keyup(function() { ToggleButton(); }); }); function ToggleButton() { if (($('#Name').val() != '') && ($('#City').val() != '')) { $(':input[type="submit"]').prop('disabled', false); return true; } else { $(':input[type="submit"]').prop('disabled', true); return false; } } </script> <form method="post"> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <fieldset> <label class="control-label text-danger">Name</label> <input type="text" id="Name" name="Name" class="form-control" /> <label class="control-label">Address</label> <input type="text" id="Address" name="Address" class="form-control" /> <label class="control-label text-danger">City</label> <input type="text" id="City" name="City" class="form-control" /> <label class="control-label">Pin</label> <input type="text" id="Pin" name="Pin" class="form-control" /> <input type="submit" value="send" class="btn btn-success" /> </fieldset> </div> </div> </form>

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

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

看看我项目中的这个片段

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

所以在你的操作执行后禁用按钮

(美元)。attr(“禁用”,“禁用”);

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

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*/

这个问题已经2年了,但它仍然是一个好问题,它是第一个谷歌结果,但所有现有的答案都建议设置和删除HTML属性(removeAttr("disabled"))“残疾”,这不是正确的方法。关于属性和属性有很多混淆。

HTML

标记中<input type="button" disabled>中的"disabled"被W3C称为布尔属性。

HTML与DOM

引用:

属性在DOM中;一个属性在HTML中,被解析成DOM。

https://stackoverflow.com/a/7572855/664132

jQuery

相关:

然而,关于checked属性要记住的最重要的概念是,它并不对应于checked属性。该属性实际上对应于defaultChecked属性,应该仅用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变,而选中的属性则会。因此,跨浏览器兼容的确定是否选中复选框的方法是使用属性。

相关:

属性通常影响DOM元素的动态状态,而不改变序列化的HTML属性。例如,输入元素的value属性,输入和按钮的disabled属性,或者复选框的checked属性。应该使用.prop()方法来设置禁用和检查,而不是使用.attr()方法。

$( "input" ).prop( "disabled", false );

总结

(…更改DOM属性,例如[…]]禁用状态,使用.prop()方法。

(http://api.jquery.com/attr/)

关于问题的disable on change部分:有一个名为“input”的事件,但浏览器支持有限,而且它不是jQuery事件,因此jQuery无法使其工作。change事件可靠地工作,但在元素失去焦点时触发。因此,人们可能会将两者结合起来(有些人还会听keyup和paste)。

下面是一段未经测试的代码来说明我的意思:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});