Question

希望你们能提供帮助。我有一个这样的表格，

形式：

      <form action="#">
        <header>
        <h2 id="title">This is a Survey Title</h2>
        <div>This are some Survey Instructions</div>
        </header>

     <ul class="Question_list">
<li class="question">
  <div>
    <fieldset>
      <p>Question</p>
      <div>
        <input id="radioDefault_5" name="Field5" type="hidden" value="">
        <div>
          <input id="Field5_0" name="Field5" type="radio" value="First Choice" tabindex="5" checked="checked">
          <label class="choice" for="Field5_0">First Choice</label>
        </div>
        <div>
          <input id="Field5_1" name="Field5" type="radio" value="Second Choice" tabindex="6">
          <label class="choice" for="Field5_1">Second Choice</label>
        </div>
        <div>
          <input id="Field5_2" name="Field5" type="radio" value="Third Choice" tabindex="7">
          <label class="choice" for="Field5_2">Third Choice</label>
        </div>
      </div>
    </fieldset>
  </div>
</li>
<li class="question">
  <div>
    <fieldset>
      <p>
        Question 2
      </p>
      <div>
        <input id="Field6" name="Field6" type="checkbox" value="First Choice" tabindex="8">
        <label class="choice" for="Field6">First Choice</label>
      </div>
      <div>
        <input id="Field7" name="Field7" type="checkbox" value="Second Choice" tabindex="9">
        <label class="choice" for="Field7">Second Choice</label>
      </div>
      <div>
        <input id="Field8" name="Field8" type="checkbox" value="Third Choice" tabindex="10">
        <label class="choice" for="Field8">Third Choice</label>
      </div>
    </fieldset>
  </div>
</li>
  </ul>  
  <div>
    <div>
      <button type="button" id="nextQ" class="btn btn-default">Next</button>
      <button id="saveForm" class="btn btn-default" disabled>Submit</button>
    </div>
  </div>

</form>

我希望在我的所有问题都选择了答案后立即启用提交按钮。我试过这样的事但没有成功：

var $fields = $(":input");
    $fields.keyup(function() {
        var $emptyFields = $fields.filter(function() {
            return $.trim(this.value) === "";
        });

        if (!$emptyFields.length) {
           //enable button
        } else {
           // disable button
        }
    });

我如何用jquery做到这一点？

非常感谢你。

Answer 1

已经有了JavaScript解决方案。我将使用jQuery根据用户的请求提供答案。我必须对html进行一些更改，如下所示：

复选框具有不同的名称属性值。我把它们都做了 - 问题＃2
问题1的单选按钮具有相同的名称属性值，但是隐藏的输入元素具有相同的名称属性值 - 我对此进行了评论。

以下是我的注意事项：

不同的表单元素类型（文本框，单选按钮，选择，textareas，复选框）具有不同的验证方式。幸运的是，无线电和复选框的验证方式相似。
不同的表单元素类型具有不同的触发器，可用于触发验证检查的开始。

如果表单要扩展为使用多种不同的表单元素类型，则可以将行添加到事件绑定部分和switch语句中的相应case部分。它很直接：

$(function() {
    var elements = $('form').find('input,select,textarea')
    .map( function(v, i) { return this.name; }).get();
    $.unique( elements );
    console.log( elements );
    $('input[type=text]').on('keyup',ready2Submit);
    $(':radio,:checkbox').on('change',ready2Submit);        

    function ready2Submit() {
        var ready = true;
        $.each(elements, function() {
            var el = $('[name=' + this + ']');
            switch( el[0].type ) {
                case 'checkbox':
                case 'radio':
                    if( el.filter(':checked').length === 0 ) {
                        ready = false;
                        return false;
                    }
                    break;
                case 'text':
                    if( el[0].value.trim().length === 0 ) {
                        ready = false;
                        return false;
                    }
                    break;
            }
        });
        $('#saveForm').prop('disabled',!ready);
    }
});

THIS DEMO显示上述代码正在运行。我添加了一个文本框，以显示代码如何在＆amp;如果有必要的话。

Answer 2

这不是一个很棒的设计，因为如果脚本关闭，你会遇到一些麻烦。你可以通过javascript关闭它来解决这个问题。

无论如何，请尝试此解决方案enable

您的问题是如何评估输入是否已填写。如果您的所有输入都是复选框，那么使用该解决方案应该没问题。以下是从该答案中删除的评估结果。

 if (el.type == 'checkbox' && !el.checked)

检查我的表单中的所有问题是否都有答案Jquery

2 个答案: