Question

所以当我分别选中或取消选中复选框时，我会尝试启用或禁用提交按钮。 默认情况下，该复选框未选中 on Page Load ，但是“提交”按钮已启用。这是我的代码：

脚本：

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

Answer 1

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

<script>

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

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

Answer 2

您只是在单击复选框时进行此检查，您还需要在页面加载时执行此操作。

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

EnableSubmit({checked:0});

JSFiddle

或者您只需提供<input> disabled属性，这意味着默认情况下它会在页面加载时被禁用：

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

如果像您的标记所示，您使用的是jQuery，那么此代码段就足够了：

// 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();

Answer 3

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

实施例

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

然后在检查按钮中点击此功能。

最好的问候。

Answer 4

在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()注释的字符串。表格可能无法提交，但浏览器可能认为是，所以如果您关心用户的历史记录取消注释，并仔细检查历史状态是否正常。祝好运！

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

4 个答案: