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

それは機能しますが、たとえば入力スパのコンテンツを削除すると、送信ボタンは引き続き有効になります

4

7 に答える 7

42

トリムと値を使用します。 

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

このスニペットは、フォームを展開する場合に備えて、3 つ以上のチェックボックスを処理します。

$("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 に答える