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

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


当前回答

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

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

其他回答

$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

登入表格:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

Javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

提供各种类型的溶液。所以我想尝试一种不同的解决方案。简单地说,如果您在输入字段中添加id属性,将会更容易。

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

下面是jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

它是这样工作的:

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

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

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

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