如何强制用户从下拉列表和按钮中选择一个值以启用保存按钮？

Question

我想知道如何从表单中为组合框添加监听器？我已经有一个单选按钮的监听器代码。我想要的是在启用提交按钮之前强制用户从组合框和单选按钮中进行选择。

下面的脚本是因为选择了单选按钮时，将启用提交按钮。

    EnableSubmit = function (val) {
        var sbmt = document.getElementById("Submit");

        if (val.checked == true) {
            sbmt.disabled = false;
        }
        else {
            sbmt.disabled = true;
        }
    }
</script>

Here is my jsfiddle so far.

问题是，一旦表单中的所有字段都填满，如何为组合框添加侦听器以启用提交按钮。非常感谢您！

更新

我在脚本中添加了val.selected!=""。它首先尝试工作，但是当您更改答案时，提交按钮会被禁用和启用。我想它不应该是onclick，但我不确定。有什么想法吗？

Here is the jsfiddle.

更新 2 似乎只有单选按钮启用了提交按钮。 T^T

Answer 1

因为我倾向于成为有史以来最懒惰的人（阅读：喜欢高效的人）我倾向于使用 html5 的 form.checkValidity 函数，该函数在大多数现代浏览器中似乎都可用。如果您打算允许低于 IE11、Edge 13、Firefox 46 或 Chrome 50（不包括移动浏览器），那么这绝对不适合您。

$(document).ready(function() {
  $('#register input,textarea,select').on('change', function() {
    var form = this.form;
    var isValid = form.checkValidity();
    $(':submit').attr('disabled', !isValid);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="register">
  <input type="text" placeholder="Hello" required />Click the Radio Button
  <input type="radio" name="something" value="yes" required/>
  <br />
  <select name="something_else" required>
    <option></option>
    <option value="1">One</option>
    <option value="2">TWo</option>
  </select>
  <button type="submit" disabled="true">Submit</button>
</form>

Answer 2

检查一下，如果此代码适合您。

$('.rad,#1,#2,#3').on('change', function() {
var sub = $('#Submit');
var rad = $('.rad').is(":checked");
var sel1 = $('#1');
var sel2 = $('#2');
var sel3 = $('#3');
  if (sel1.val() && sel2.val() && sel3.val() && rad) {
    sub.prop("disabled", false);
  }else{
  	sub.prop("disabled", true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  test 1&nbsp;&nbsp;
  <select id="1">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <br> test 2&nbsp;&nbsp;
  <select id="2">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <br> test3&nbsp;&nbsp;&nbsp;
  <select id="3">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <br> test4&nbsp;&nbsp;
  <input type="radio" id="radio" name="radio" value="1" class="rad">1
  <input type="radio" id="radio" name="radio" value="2" class="rad">2
  <br>
  <br>
  <input type="button" id="Submit" name="Submit" value="Submit" disabled>
</form>

Answer 3

所以，我为您创建了一个通用验证：

$(".input-required").change(function() {
  var allRequiredValid = true;
  $(".input-required").each(function() {
    var $input = $(this);
    if (($input.prop("type") === "radio" && $("[name='" + $input.prop("name") + "']:checked").length == 0) || $(this).val() == "") {
      allRequiredValid = false;
    }
  });
  if (allRequiredValid) {
    $("#Submit").removeProp("disabled");
  }
});

您只需在要验证的输入上添加类 input-required：

<form>
  test 1&nbsp;&nbsp;
  <select id="1" class="input-required">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <br> test 2&nbsp;&nbsp;
  <select id="2" class="input-required">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <br> test3&nbsp;&nbsp;&nbsp;
  <select id="3" class="input-required">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <br> test4&nbsp;&nbsp;
  <input type="radio" id="radio" name="radio" value="1"  class="input-required">1
  <input type="radio" id="radio" name="radio" value="2"  class="input-required"> 2
  <br>
  <br>
  <input type="button" id="Submit" name="Submit" value="Submit" disabled>
</form>

PS：我没有验证复选框

这是您更新的 Fiddle：https://jsfiddle.net/diegopolido/2d61fzex/3/