19

我正在制作一个带有输入的表单，如果输入类型为空，则按钮提交被禁用，但是，如果输入字段的长度> 0，则启用提交按钮

<input type='text' id='spa' onkeyup='check()'><br>
<input type='text' id='eng' onkeyup='check()'><br>
<input type='button' id='submit' disabled>

function check() {
  if($("#spa").lenght>0 && $("#eng").lenght>0) {
    $("#submit").prop('disabled', false);
  } else {
    $("#submit").prop('disabled', true);
  }
}

它可以工作，但如果我删除例如输入 spa 的内容，按钮提交仍然启用

4

7 回答 7

42

使用 trim 和 val。 

var value=$.trim($("#spa").val());

if(value.length>0)
{
 //do some stuffs. 
}

val(): 返回输入的值。

trim(): 将修剪空白。

于 2013-03-07T10:08:06.397 回答
19

使用.val()，它将返回的值<input>

$("#spa").val().length > 0

你有一个错字，length不是lenght。

于 2013-03-07T10:06:32.373 回答
7

由于 javascript 是动态类型的，而不是像上面那样使用 .length 属性，您可以简单地将输入值视为布尔值：

var input = $.trim($("#spa").val());

if (input) {
    // Do Stuff
}

您还可以将逻辑提取到函数中，然后通过分配一个类并使用该each()方法，代码更加动态，例如，如果将来您想添加另一个输入，您不需要更改任何代码。

因此，与其将函数调用硬编码到输入标记中，不如给输入一个类，在本例中为test，并使用：

$(".test").each(function () {
    $(this).keyup(function () {
        $("#submit").prop("disabled", CheckInputs());
    });
});

然后它将调用以下内容并返回一个布尔值以分配给disabled属性：

function CheckInputs() {
    var valid = false;
    $(".test").each(function () {
        if (valid) { return valid; }
        valid = !$.trim($(this).val());
    });
    return valid;
}

您可以看到我在此 JSFiddle 中提到的所有内容的工作示例。

于 2013-03-07T10:12:09.467 回答
4

你为什么不使用：

<script>
$('input').keyup(function(){
if(($('#eng').val().length > 0) && ($('#spa').val().length > 0))
    $("#submit").prop('disabled', false);
else
    $("#submit").prop('disabled', true);
});
</script>

然后删除输入上的onkeyup函数。

于 2013-03-07T10:13:12.603 回答
3

试试这个

$.trim($("#spa").val()).length > 0

它不会将任何空白视为正确值

于 2013-03-07T10:08:54.387 回答
2

如果您jquery-validate.js在应用程序中使用，请使用以下表达式。

if($("#spa").is(":blank"))
{
  //code
}
于 2013-03-07T10:11:07.613 回答
2

如果您决定展开表单，此代码段将处理两个以上的复选框。

$("input[type=text]").keyup(function(){
    var count = 0, attr = "disabled", $sub = $("#submit"), $inputs = $("input[type=text]");  
    $inputs.each(function(){
        count += ($.trim($(this).val())) ? 1:0;
    });
    (count >= $inputs.length ) ? $sub.removeAttr(attr):$sub.attr(attr,attr);       
});

工作示例：http: //jsfiddle.net/sr4gq/

于 2013-03-07T10:27:38.520 回答