如何禁用表单提交按钮，直到字段被 jQuery Mobile 填充？答案

【问题标题】：How to disable form Submit button until fields are filled with jQuery Mobile?如何禁用表单提交按钮，直到字段被 jQuery Mobile 填充？
【发布时间】：2011-11-06 09:27:50
【问题描述】：

我一直在寻找一种解决方案，在填写必填字段之前禁用表单提交按钮。我在 stackoverflow 找到了一些东西（由 mblase75 提供），但它适用于标准 jQuery，不适用于 jQuery Mobile。

这背后的原因是移动页面上有一个表单，要求在提交之前填写所有字段。验证是通过 php 解决的，所以它不是必需的部分。

$(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);
        });
    });

遗憾的是，我不是 jQuery 专家，如果可能的话，我希望得到一些帮助。也欢迎任何其他建议（即使是使用 jQuery mobile 进行验证）。

【问题讨论】：

stackoverflow.com/questions/5854580/jquerymobile-button/…相关
这是解决方案的一部分，但这是工作部分，按钮被禁用，但在表单完成后不会启用。
另外，jQuery 版本：jQuery：1.6.4 jQuery Mobile：1.0RC2

标签： jquery html mobile jquery-mobile

【解决方案1】：

$(function() {
    var form = $('#formid');
    var submitBtn = $('#submitBtnId');

    submitBtn.addClass('disable');

    form.submit(function()

        if(validate()) {
            submitBtn.removeClass('disable');
        }

        if(submitBtn.hasClass('disable')) {
            return false;
        }

        else {
            return true;
        }

    });

    function validate() {
        form.find('input, textarea').change(function(){
            // validation goes here if all inputs are validate then return true otherwise false
        });
    }
});

【讨论】：

【解决方案2】：

您实际上可能正在检查其他“按钮”的值，例如 input[type="button"] 或 input[type="reset"]。除非设置它们，否则它们具有空白值。以下代码说明了这一点（加上更多的缓存语句）：

$(document).ready(function() {
    var $form = $('#formid'), // cache
        $inputs = $form.find(':input'), // MOD extra caching
        $buttons = $inputs.not(':submit, :reset, :button'),
        $fields = $inputs.not($buttons),
        $submits = $buttons.filter(':submit');

    $submits.prop('disabled', true); // disable submit btn
    $fields.keyup(function() { // monitor all inputs for changes, MOD changed to keyup
         var disable = false;
         $fields.each(function(i, el) { // test all inputs for values
            if ($(el).val() === '') { // MOD use jQuery to get value
                    disable = true; // disable submit if any of them are still blank
                    return false; // MOD stop "each" if even one field is blank... less waste
            }
         });
         $submits.prop('disabled',disable);
        });
});

但是，这不会考虑未选中的一组单选按钮。

【讨论】：