logo标签列表

当文本和文本区域为空时禁用/启用按钮

javascriptjquerytextarea
5
我有这段代码，当文本为空时禁用按钮，但我有一个textarea的HTML代码。如何包含它，使得当文本和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" />

你在 jQuery 中错过了 textarea 选择器，所以它没有起作用吗？ - Bhojendra Rauniyar
这是我的问题，我需要在按钮启用之前检查文本区域是否已填写。 - jovenne
8个回答
9
您在jQuery中缺少textarea选择器。 

$(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" />

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文档中所述：

jQuery 1.6之前，.attr()方法在检索某些属性时有时会考虑属性值， 这可能导致不一致的行为。 自jQuery 1.6以来，.prop()方法提供了 明确检索属性值的方法，而.attr()则检索属性。

FIDDLE演示

@C-Link：我已经更新了代码。感谢你指出来！ - palaѕн
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>
0
所选答案可以完成任务，但还不够。一个填满空格（按下空格键多次）的文本区域和文本字段将启用提交按钮。
因此，在将这些字段的值传递到 if 语句之前，您需要对其应用 $.trim()，如下所示。
$(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);
    }
});
});
0
使用prop 
$('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);
    }
});

通过属性，我们可以进行一些操作。
 $('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');
        }
    });

查看{{link1：.prop() vs .attr()}}

它不起作用。我希望当文本和文本区域都填写时，按钮才会启用。 - jovenne
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);
   }
})
0
0

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

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

//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);
 });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接