Javascript 如何限制按钮，除非文本框中有文本

我想阻止我的提交按钮被选中，直到用户在我的文本框中输入文本。。我研究了Jquery，但不确定如何将其应用于我的情况

如果你看下面的代码，我有一个表，这是一个部分，我可以添加值到我的BD中的一个表。我有3个其他不同的表，类似但不相同，每个表都有自己的提交按钮，我想限制，但关闭自己的文本框，而不是来自不同表的其他

我怎样才能做到这一点

这是我创建的一个表

<table width="600">
    <tr>
        <td width="15%">
            <b>name:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductname" />
            <span>Enter Text </br>i.e. <i>Super Small</i></span>
            </div>
        </td>
        <td width="15%">
            <b>width:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductwidth" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>height:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductheight" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>normal fill:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdnormalfill" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>our fill:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdourfill" />
                <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>old price:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdoldprice" />
            <span>Enter Dollar Amount </br>i.e. <i>150.99</i></br>no dollar sign requiered</span>
            </div>
        </td>
        <td width="15%">
            <b>new price:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdnewprice" /> 
            <span>Enter Dollar Amount </br>i.e. <i>150.99</i></br>no dollar sign requiered</span>
            </div>
        </td>
        <td>
            </br><input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" />
        </td>
    </tr>
</table>

姓名：
输入文本
即超小
宽度：
输入一个数字，即1000
高度：
输入一个数字，即1000
正常填充：
输入一个数字，即1000
我们的填充：
输入一个数字，即1000
旧价格：
输入美元金额，即150.99
无需美元符号
新价格：
输入美元金额，即150.99
无需美元符号

任何帮助都将不胜感激

<input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" disabled='disabled" />

---

请尝试以下代码

//On document load
    $(function(){
          //Set button disabled
          $("input[type=submit]").attr("disabled", "disabled");

          //Append a change event listener to you inputs
          $('input').change(function(){
                //Validate your form here, example:
                var validated = true;
                if($('#5050gdnormalfill').val().length === 0) validated = false;
                //do validation for all field as above, add id field for every element

                //If form is validated enable form
                if(validated) $("input[type=submit]").removeAttr("disabled");                              
          });


    })

$（'input[type=text]”）​.keyup（函数（）{
如果（如果）（如果（如果）（如果）（如果）（如果“输入[名称名称=505050500gdgdgdgdgdgdgdpropro名名名名名名为5050505050500gdgdgdgdgdpro名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名为5050505050505050505050505050505050505050505050505050505050505050505050505050505000000gdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdpropropropropropro名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名名“）.val（）==”）
{
$（'input[name=submit505gd]'）。attr（'disabled'，'disabled'）；
}否则{
$（'input[name=submit505gd]'）。removeAttr（'disabled'）；
}
});​​​​

---

很多答案，让我很困惑。在表单被sumbit时验证表单要好得多，不要执行诸如禁用提交按钮之类的操作。如果希望所有文本输入都包含文本，则：

function validate(form) {
    var el, elements = form.elements;

    for (var i=0, iLen=elements.length; i<iLen; i++) {
        el = elements[i];

        if (el.tagName.toLowerCase == 'input' &&  el.type == 'text') {
            if (el.value == '') {

                // Deal with error, e.g. show message

                // Stop form submitting
                return false;
            }
        }
    }
}

要禁用按钮或：

  form.submit5050gd.disabled = false;

---

要启用它。但这有点令人厌烦，用户往往不理解禁用的控件。最好让他们知道他们必须在每个输入中输入一些内容，并在提交表单时进行验证。

以下是供您帮助的小提琴链接：

按钮单击事件中的句柄

如果所有文本框均为给定值，则继续提交，否则不提交

使用为实时演示提供的链接

---

注意：您可以编辑此代码，以禁用/启用。

您的意思是要禁用“提交”按钮，直到填写表单字段为止？解释并没有给出您想要的内容。尽量简化情况。@LearneR是的，对不起，这就是我要做的。@HurkNburkS我没有测试我的代码，但你可以使用这种方法，因为它快速有效。我已经尝试过这种代码，但它对我不起作用。。它禁用了按钮，但一旦我输入了内容，它仍然不会被启用。我使用的是你的确切代码，它对我不起作用。我甚至还加了一句“是的，我看到了……”。。我将尝试用你的代码替换我的代码，因为我刚刚重写了它。。我是否要输入$（'[type=tex….在我从未使用过/见过这个JSFIDLE的内部，所以不确定可能缺少了什么。你能显示你的jquery代码吗？并且确保你的jquery脚本标记正确。我只是逐字复制/粘贴你的代码。我无法让它工作：p条件永远不会为真，输入的值是一个最小长度为0的字符串，因此它永远不会是

<0

。无论如何，测试

if（this.value==''）要简单得多，也更明显得多

。因此，我刚刚尝试使用您的代码，直接从门口查看提交是否有效。但它没有。因此，这让我觉得我做错了。我正在像这样重新引用我的javascript文件，该文件位于同一目录中，并且正是您链接上的文件。啊哈..明白了..非常感谢我做错了关于js的事情..你的例子帮助我堆积..但是这确实减慢了我的代码..谢谢tho.如果文本框显示在html页面中，则此代码是一个缺陷。。。。

function validate(form) {
    var el, elements = form.elements;

    for (var i=0, iLen=elements.length; i<iLen; i++) {
        el = elements[i];

        if (el.tagName.toLowerCase == 'input' &&  el.type == 'text') {
            if (el.value == '') {

                // Deal with error, e.g. show message

                // Stop form submitting
                return false;
            }
        }
    }
}

<form ... onsubmit="return validate(this);" ...>

  form.submit5050gd.disabled = true;

  form.submit5050gd.disabled = false;