5

テキストが空のときにボタンを無効にするこのコードがありますが、textarea html コードがあります。テキストとテキストエリアの両方が空の場合はボタンが無効になり、両方が満たされている場合は有効になるようにするにはどうすればよいですか。以下のコードを試してみましたが、テキストでのみ機能します。何か案は？

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled', false);
        } else {
            $('input[type="submit"]').attr('disabled', true);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="textField" />
<textarea rows="4" cols="30" ></textarea>
<input type="submit" value="next" />

4

8 に答える 8

9

textareajQueryでセレクターが見つからない

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    
    $('input[type="text"],textarea').on('keyup',function() {
        var textarea_value = $("#texta").val();
        var text_value = $('input[name="textField"]').val();
        
        if(textarea_value != '' && text_value != '') {
            $('input[type="submit"]').attr('disabled', false);
        } else {
            $('input[type="submit"]').attr('disabled', true);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="textField" /><br>
<textarea rows="4" cols="30" id="texta"></textarea><br>
<input type="submit" value="next" />

于 2013-11-06T07:27:14.030 に答える
3

.prop()次のような方法を使用してこれを行うことができます。

// Cache the elements first
var $text = $('input[type="text"]');
var $textarea = $('textarea');
var $submit = $('input[type="submit"]');

// Set the onkeyup events
$submit.prop('disabled', true);
$text.on('keyup', checkStatus);
$textarea.on('keyup', checkStatus);

// Set the event handler
function checkStatus() {
    var status = ($.trim($text.val()) === '' || $.trim($textarea.val()) === '');
    $submit.prop('disabled', status);
}

ご参考までに

で述べたように.prop() API Documentation：

jQuery 1.6 より前では、.attr()一部の属性を取得するときにメソッドがプロパティ値を考慮することがあり、一貫性のない動作を引き起こす可能性がありました。jQuery 1.6 の時点で、.prop()メソッドはプロパティ値を明示的に取得する方法を提供し、.attr()属性を取得します。

フィドルのデモ

于 2013-11-06T07:28:39.553 に答える
0

入力フィールドとテキストエリアの両方をチェックしてください。そのために、両方のフィールドを keyup イベントにバインドし、値を確認できます

$('input[type="submit"]').prop('disabled', true);
$("#yourtextfield,#yourtextarea").on("keyup","#parentdiv",function(){
if($("#yourtextfield").val() == '' || $("#yourtextarea").val() == ''){
   $('input[type="submit"]').prop('disabled' , true);
   }
else{
   $('input[type="submit"]').prop('disabled' , false);
   }
})
于 2013-11-06T07:23:56.193 に答える
0

スペースを確認する必要があると思います。

$("textarea").on('mouseout', function(){
  if (!$.trim($("textarea").val())) {
    alert("empty");
 }
});

テストしてください: http://jsfiddle.net/mehmetakifalp/ef5T9/

于 2013-11-06T07:28:49.913 に答える
0

小道具を使う

$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],textarea ').on('keyup',function() {
    if($(this).val()) {
        $('input[type="submit"]').prop('disabled' , false);
    }else{
        $('input[type="submit"]').prop('disabled' , true);
    }
});

attr によって行うことができます

 $('input[type="submit"]').attr('disabled', 'disabled');
    $('input[type="text"],textarea ').on('keyup',function() {
        if($(this).val()) {
            $('input[type="submit"]').removeAttr('disabled');
        }else{
            $('input[type="submit"]').attr('disabled','disabled');
        }
    });

.prop() と .attr()を参照してください

于 2013-11-06T07:16:38.497 に答える
0 
<input type="text" name="textField" />
<textarea rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />

<script type="text/javascript">
    $(document).ready(function() {
        $('input[type="submit"]').attr('disabled', true);
        $('input[type="text"],textarea').on('keyup',function() {
        var textarea_value = $("#texta").val();
        var text_value = $('input[name="textField"]').val();

        if(textarea_value != '' && text_value != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
        });

    });
</script>
于 2018-02-14T06:39:49.147 に答える