Javascript 禁用提交，除非所有文本区域都已填满答案

【问题标题】：Javascript disable submit unless all text areas filledJavascript 禁用提交，除非所有文本区域都已填满
【发布时间】：2015-07-19 12:46:02
【问题描述】：

我希望在激活提交按钮之前完成表单中的各种文本区域。我已经对此进行了研究，并且已经发现如何指定特定的文本区域/输入，但是取决于用户组将取决于显示的文本区域数量，因此我需要一个全面的 javascript 来检查页面上显示的任何文本区域之前是否已填充提交按钮被激活。

我看过这个：http://jsfiddle.net/qKG5F/641/ 但是我自己并没有成功地实现它。

(function() {
$('form > input').keyup(function() {

    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disabled');
    } else {
        $('#register').removeAttr('disabled');
    }
});   
 })()

这可能是因为我是如何创建文本区域的吗？如下图

<textarea name="i_2" id="i_2" class="input-block-level"></textarea>

而不是像上面的 JSFiddle 示例那样使用 <input>。

如果不是所有文本区域都已填充（不指定每个文本区域），有什么方法可以禁用提交按钮？我已经使用 JSFiddle 示例相应地编辑了我的提交按钮。

【问题讨论】：

文本区域不是输入字段。您可以通过给所有元素一个类而不是使用输入元素作为选择器来轻松解决这个问题。
我能看到你的完整 html 吗？
用$('form').children(':input')代替$('form > input')来处理textareas
@A.Wolff 已经尝试过了，但是即使在所有文本区域都插入了文本之后，该按钮仍然处于禁用状态
@Liam-FD 所以你做错了什么，因为它对我有预期的效果

标签： javascript jquery html forms textarea

【解决方案1】：

在 HTML5 中，您实际上可以使用一个非常简单的“必填”命令在激活提交按钮之前使任何表单元素成为必填字段。它消除了对任何不必要的 JavaScript 的需要。

<textarea name="i_2" id="i_2" class="input-block-level" required></textarea>

试一试 :) 这样的东西就是我喜欢 HTML5 的原因

【讨论】：

虽然这并不能解决他的问题.. 是的，他可以使用 required 但他的按钮仍然不会被禁用等

【解决方案2】：

为什么你认为 textarea 是一个输入？以下是当您在一种形式中具有输入和文本区域时的代码，并且您希望在输入或文本区域之一为空时禁用按钮。 Input 和 textarea 是不同的 html 元素！您不能使用“输入”选择文本区域。

(function() {
    $('form > input, form > textarea').keyup(function() {

        var empty = false;
        $('form > input, form > textarea').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()

仅用于文本区域：

$('form > textarea')

更好的方法是使用类名，例如“must_be_filled”并将这个类分配给任何 html 元素。

您可以通过以下方式选择元素：

$('form > .must_be_filled')

试试这个：

http://jsfiddle.net/g0m79p81/

【讨论】：