Question

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

Answer 1

请尝试以下代码：

$(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/

Answer 2

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

Answer 3

为什么您的提交按钮被禁用或呈现为已禁用。我检查了萤火虫并得到了这个。通过firebug如果我删除disable =＆＃34;禁用＆＃34;，它将工作意味着发布。

<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>

禁用提交按钮，直到填写输入字段

3 个答案: