5

我有这段代码可以在文本为空时禁用按钮，但我有一个 textarea html 代码。我怎样才能包含这一点，即当 text 和 textarea 都为空时，按钮将被禁用，而当两者都被填充时，它会启用。我尝试了下面的代码，它仅适用于文本。有任何想法吗？

$(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 回答
0

我需要一个有 2 个文本字段和一个提交按钮的解决方案。业务逻辑是用户应至少在任一文本字段中输入一个值以启用提交按钮。

这是我在代码中使用的解决方案。它可能不是最佳/最佳解决方案，但它完成了工作。如果您有更好的方法，请发表评论。

//Enable Submit button for search only on text input

$(".inputFieldCSSClass").on('keyup', function(){
     var isEmpty = !($.trim($("#inputText1").val()).length > 0 || 
                     $.trim($("#inputText2").val()).length > 0);
      $("#btnSubmit").prop('disabled', isEmpty);
 });
于 2019-12-24T04:28:27.407 回答
0

选定的答案可以完成工作，但还不够。用空格填充的文本区域和文本字段（按空格键几次）将启用提交按钮。

因此，您需要先应用$.trim()这些字段中的值，然后再将它们传递给 if 语句，如下所示

$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);

$('input[type="text"],textarea').on('keyup',function() {
    var textarea_value = $.trim($("#texta").val());
    var text_value = $.trim($('input[name="textField"]').val());

    if(textarea_value != '' && text_value != '') {
        $('input[type="submit"]').attr('disabled', false);
    } else {
        $('input[type="submit"]').attr('disabled', true);
    }
});
});
于 2018-09-10T22:18:34.013 回答