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

Posted 2023-05-09

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

【英文标题】：How to force user to select a value from dropdown and button to enable the save button?

【发布时间】：2016-08-26 17:14:35

【问题描述】：

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

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

    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

【问题讨论】：

我制作了一个jquery 示例，如果您想要原生 javascript，请告诉我，我会转换。

jquery 或 javascript 对我来说很好，但是当我在我的网站上使用它时，您的下面的答案不起作用。 :(

【参考方案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>

【讨论】：

这是最好的，因为它是最简单的。当每个现代浏览器都已经为您完成并且做得更好时，为什么要在 jquery 中重新发明***。 +1

这适用于移动浏览器吗？喜欢 Safari for iphone 和其他移动浏览器？

不错的代码，您只需检查表单是否有效，感谢分享。

@user3771102 我真的不能说。通过 CanIUse 网站阅读它说.checkValidity() 在 ios Safari、Safari 和 Opera Mini 中存在一些问题。我不能说它会对你的代码产生多大影响，但我可以说我倾向于对数据服务器端进行更彻底的检查，因为有人可以检查元素并将 disabled 属性设置为 false，如果他们 真的 想提交虚假数据。

到目前为止，您的代码运行良好。我会让 QA 检查这段代码是否没有问题。如果没有，那么一切都很好。 :D 再次感谢您。我会记住这个插件。 :)

【参考方案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>

【讨论】：

当前代码中未考虑的一种情况：如果启用了Submit，并且我在select 元素中选择了空选项，则该按钮不会被禁用。

好吧，它似乎可以在 jsfiddle 上运行，但在我的网站中使用它却不起作用。我不知道为什么。 x.x

嗯，没有错误。即使我填写了表单，提交按钮也没有启用..

但是您的项目在线？检查 jquery 是否正确连接，或者您可能没有 jquery，因为您的第一个项目是本机 javascript。

我已经在我的项目中添加了 jquery 的脚本仍然不行。 x.x 谢谢你的回答顺便说一句！它真的很好，但我猜它与我的项目不兼容。

【参考方案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/

【讨论】：

嗨！我不能使用你的代码，因为我的字段上有一个特定的类。但是谢谢你的回答。我可能会在我的其他项目中使用它。 :)

你不能再添加一个类吗？哈哈

我可以，但我不是编写代码的人，我不想更改它，因为它看起来很奇怪。不是通常的class="name"。它实际上看起来像这样：class="<%=option.class%>"><%=option.name% 所以我不确定是否可以添加另一个类。

class="input-required ">" ;)

PS：它正在使用 jquery ;)