在填写输入字段之前禁用提交按钮答案

【问题标题】：Disable submit button until input fields are filled在填写输入字段之前禁用提交按钮
【发布时间】：2015-05-14 07:25:00
【问题描述】：

这是我的网站链接，在这里我一直在尝试使用 jquery 代码来启用/禁用按钮，但无法成功实现。您可以检查元素以查看代码，并且输出不正常

【问题讨论】：

抱歉，您的声明 (when I am selecting all the radio button values then also button in disabled mode.when I am selecting all the radio button the button should turn to enabled mode) 不清楚您是否希望在用户未选择所有单选选项之前一直禁用提交按钮？并在选择所有单选按钮值时启用提交按钮。对吗？
我已经编辑了您的问题和标题。所以以后看到它的任何人都可以轻松获得帮助

标签： javascript jquery html

【解决方案1】：

Tushar 的解决方案运行良好。但我建议您使用正式/标准方法进行验证。

不要禁用提交按钮。只需在 html 中为每个单选按钮使用 required 属性，例如

<input id="input_5_0_1" class="form-radio" type="radio" required="required"
 name="customer_appointment" value="Good" />

或者像使用js（它的捷径）一样

$(document).ready(function () {    
    $('form input').attr('required','required');        
});

Demo on Fiddle

这样，在您填写所有字段之前，您将无法提交，尽管您的按钮未被禁用。

但是，如果您必须使用按钮禁用方法，您可以按照@Tushar 的上述答案进行操作

编辑此解决方案仅适用于支持 html5 的现代浏览器。此链接http://html5readiness.com/ 中未提及的浏览器（例如 Internet Explorer 4、5、6）不支持 HTML5

【讨论】：

你也应该提到browser support

【解决方案2】：

试试下面的代码：

$(document).ready(function () {
    var noOfRadio = 0;
    var names = [];

    $('form :radio').each(function () {
        if (!names[$(this).attr('name')]) {
            names[$(this).attr('name')] = 1;
            noOfRadio++;
        }
    });
    console.log(noOfRadio);
    $('form').on('change', ':radio', function () {
        console.log($('form').find('input[type="radio"]:checked').length);
        if ($('form').find('input[type="radio"]:checked').length === noOfRadio) {
            console.log('Enable');
            $('#input_2').prop('disabled', false);
        } else {
            $('#input_2').prop('disabled', true);
        }
    });
});

演示：https://jsfiddle.net/tusharj/u0mLLo3L/

【讨论】：

.each 方法中的第二个 '>' 呢？
@care567 因为button 不是form 的直接子代。删除> 后，它将适用于表单内的所有按钮

【解决方案3】：

为什么您的提交按钮被禁用或呈现为禁用状态。我签入了萤火虫并得到了这个。通过萤火虫，如果我删除 disable="disabled"，它将起作用意味着发布。

<div class="form-buttons-wrapper" style="text-align:left">
  <button id="input_2" class="form-submit-button form-submit-button-light_rounded" name="submit" type="submit"> Submit </button>
</div>

【讨论】：

首先，当用户输入所有详细信息时，它应该处于禁用模式，然后该按钮将启用。但每当我填写所有详细信息时，还要在禁用模式下提交按钮？
我检查过，它是禁用的，是的，如果输入了所有详细信息，它将启用并发布。检查你的最后，你在哪里启用，如果你有问题，那么简单地，任何时候都不要禁用并点击它。