启用/禁用在页面加载时使用复选框提交答案

【问题标题】：enable/diable submit with checkbox on page load启用/禁用在页面加载时使用复选框提交
【发布时间】：2014-12-31 15:45:03
【问题描述】：

所以我试图分别在选中或未选中复选框时启用或禁用提交按钮。 默认情况下该复选框在页面加载时未选中，但提交按钮已启用。这是我的代码：

脚本：

<script>

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

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

HMTL：

<input name="agree" type="checkbox" class="equipmentTroubleForm"  onClick="EnableSubmit(this)" value="Accept">

【问题讨论】：

首先，不是jQuery，而是Javascript
如果你是使用jQuery，你可以使用类似于this的东西

标签： jquery html checkbox controls

【解决方案1】：

在JSFiddle 上查看演示。因此，您所要做的就是制作在提交时检查复选框状态的事件处理程序。这里是：

JS：

function addEvent(elem, type, handler){ // kinda cross browser event attachment
  if (elem.addEventListener){
    elem.addEventListener(type, handler, false)
   } else {
    elem.attachEvent("on"+type, function() { handler.call(elem) })
  }
}
var checkbox = document.getElementById('FormControl');
var form = document.getElementById('DataForm');
addEvent(form, 'submit', function(e) {
     if(checkbox.checked) { 
         console.log('Cancel submit');
         e.preventDefault();
         //window.history.back();
         console.log(window.history);
         return;
     }
     else {
          console.log('Proceed submit');
     }
});

还有一个示例 HTML：

<input name="agree" type="checkbox" class="equipmentTroubleForm" value="Accept" id="FormControl">
<form id="DataForm" method='GET' action='/'>
     <input type="text" name="test">
     <input type="submit">     
</form>

注意带有window.history.back() 的注释字符串。表单可能未提交，但浏览器可能认为已提交，因此如果您关心用户的历史记录，请取消注释并仔细检查历史记录的状态是否正常。祝你好运！

【讨论】：

【解决方案2】：

您仅在单击复选框时进行此检查，您还需要在页面加载时进行此检查。

不过，为了防止出现任何错误，您可以传递一个具有虚假 checked 属性的对象：

EnableSubmit({checked:0});

JSFiddle

或者您可以简单地为您的<input> 提供disabled 属性，这意味着它在页面加载时将始终默认禁用：

<input type='submit' id='submit' disabled >

如果像你的标签建议的那样，你使用的是 jQuery，这个 sn-p 就足够了：

// Attach an event handler
$('.equipmentTroubleForm').click(function(){

    // Set the disabled property to the opposite of this.checked
    $('#submit').prop('disabled', !this.checked);

// Trigger the click (and functionality) on page load 
}).click();

【讨论】：

【解决方案3】：

更简单，您需要检查的值并将其作为 form.disable 的值。

例子

var check = document.getElementById('ID_CHECK_BOX').value;
document.getElementById("submit").disable = check;

并在检查按钮上单击时调用此函数。

最好的问候。

【讨论】：

【解决方案4】：

问题是只有在您单击复选框时才会调用您的函数。试试：

<script>

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

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

【讨论】：