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

如果此代码适合您，请检查此项。

＆＃13;

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

＆＃13;

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

＆＃13;

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：我没有验证复选框

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

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

3 个答案: