Question

！你好，

我有许多用PHP生成的复选框。有一个验证按钮。我想阻止用户在不检查至少1个复选框的情况下验证表单。

我有这段代码

var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
   for (var i=0;i<checkboxes.length;i++)
   {
      if(checkboxes[i].checked)
      {
         btn.disabled = false;
      } 
      else 
      {
         btn.disabled = true;
      }
   }
}
<form>
....
<table>
    <tr id="{{ cpt }}">
        <td><input type="checkbox" class="date" id="date" name="date[]"
                            checked value="{{ jdv.day }}"></td>
        <td>{{ jdv.day }}</td>
   </tr>
</table> 
</form>

但它只适用于第一个复选框！

你可以帮帮我吗？

由于

Answer 1

您的脚本会为未选中的每个复选框设置button.disabled = true; ...这意味着如果您选中的复选框不是最后一个，则最终会将禁用设置为true。

在btn.disabled = false;

之后将此内容添加到您的函数中

return true;

产生此代码：

var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
   for (var i=0;i<checkboxes.length;i++)
   {
      if(checkboxes[i].checked)
      {
         btn.disabled = false;
         return true;
      } 
      else 
      {
         btn.disabled = true;
      }
   }
}

这将在检测到第一个选中的复选框后停止您的功能，并防止以下内容覆盖按钮的disabled属性。

Answer 2

你最好做一些计数器，它会计算选中的复选框，最后将它与已检查复选框的最小数量进行比较

Answer 3

你应该保留一个变量，避免其他复选框结果相互覆盖。

类似的东西：

var toShow = true;
var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
for (var i=0;i<checkboxes.length && toShow;i++) {
    if(!checkboxes[i].checked)
    {
         toShow = false;
    }
}
if(toShow)
    btn.disabled = false;
} else 
{
    btn.disabled = true;
}

如果没有选中框，则javascript避免提交

3 个答案: