1

我有一个包含多个输入、选择框和文本区域的表单。我希望禁用提交按钮，直到我根据需要指定的所有字段都填充了一个值。在它们全部填满后，如果用户删除了 WAS 字段的字段，我希望提交按钮再次变为禁用状态。

我怎样才能用 jQuery 做到这一点？

4

6 回答 6

8

我猜我的第一直觉是在用户开始修改任何输入时运行一个函数。像这样的东西：

$('#submitBtn').prop('disabled', true);
$('.requiredInput').change(function() {
   inspectAllInputFields();
});

然后，我们将拥有一个检查每个输入的功能，如果它们被验证，则启用提交按钮......

function inspectAllInputFields(){
     var count = 0;
     $('.requiredInput').each(function(i){
       if( $(this).val() === '') {
           //show a warning?
           count++;
        }
        if(count == 0){
          $('#submitBtn').prop('disabled', false);
        }else {
          $('#submitBtn').prop('disabled', true);
        }

    });
}

如果存储输入值或您的其他代码正在填充数据，它仍然可以正常工作，您可能还希望在页面加载时添加对检查函数的调用。

 inspectAllInputFields();

希望这会有所帮助，〜马特

于 2011-10-13T14:57:39.203 回答
4

这是全面的，只是因为：

$(document).ready(function() {
    $form = $('#formid'); // cache
    $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
    $form.find(':input').change(function() { // monitor all inputs for changes
        var disable = false;
        $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
            if ($.trim(el.value) === '') {
                disable = true; // disable submit if any of them are still blank
            }
        });
        $form.find(':input[type="submit"]').prop('disabled', disable);
    });
});

http://jsfiddle.net/mblase75/xtPhk/1/

于 2011-10-13T14:59:27.617 回答
0

在提交按钮上设置禁用属性。像：

$('input:submit').attr('disabled', 'disabled');

并在表单字段上使用 .change() 事件。

于 2011-10-13T14:52:37.517 回答
0

从禁用按钮开始（显然）。将一个事件绑定onkeyup到每个所需的文本输入，并将一个onchange或绑定onclick到选择框（以及任何单选按钮/复选框），当它触发时，检查是否填充了所有必需的输入。如果是这样，请启用该按钮。如果没有，请禁用它。

不过，这里有一个漏洞。用户可以在不触发事件的情况下删除文本字段的值，方法是onkeyup使用鼠标“剪切”文本，或者在全部删除后按住删除/退格键，然后在删除之前单击按钮。

你可以绕过第二个

  • 禁用按钮onkeydown并检查它是否正常onkeyup
  • 单击按钮时检查有效性
于 2011-10-13T14:53:37.390 回答
0

我的一个想法：

  • 定义一个变量 - 具有全局范围 - 并添加值 true- 在检查变量上方的值中编写一个提交函数。如果值为 true，则仅评估提交事件。
  • 编写一个函数来检查输入字段中的所有值并选择字段。检查值的长度为零。如果一个字段的值长度为零，则将全局变量的值更改为 false。
  • 之后，将事件“onKeydown”或“onKeyUp”添加到所有输入字段，并将事件“onChange”添加到所有选择框。
于 2011-10-13T14:57:51.547 回答
0

我建议采用稍微不同的方法并使用 jquery 的验证http://docs.jquery.com/Plugins/validation。您建议的策略容易出现安全漏洞。用户可以轻松地使用 firebug 启用该按钮，然后提交表单。

使用 jquery 验证是干净的，它允许您在提交时根据需要在必填字段下显示错误消息。

于 2011-10-13T15:01:14.647 回答