如果选中/取消选中复选框,则启用/禁用提交按钮?

Posted

技术标签:

【中文标题】如果选中/取消选中复选框,则启用/禁用提交按钮?【英文标题】:Enable/Disable submit button if checkbox is checked/unchecked? 【发布时间】:2012-04-18 19:03:53 【问题描述】:

如何在我的 html 表单中启用提交按钮并在未选中复选框时禁用?

这段代码有什么问题?

EnableSubmit = function(val)

    var sbmt = document.getElementById("Accept");

    if (val.checked == true)
    
        sbmt.disabled = false;
    
    else
    
        sbmt.disabled = true;
    
                       

复选框

<td >Do you accept Terms of Service agreement?</td>
<td  style="min-width: 10px"></td>
<td >
    <input type="checkbox" name="TOS" value="Accept" onClick="EnableSubmit"> I agree to Terms of Service agreement.
</td>

【问题讨论】:

How do i disable a submit button when checkbox is uncheck?的可能重复 【参考方案1】:

将您的 HTML 更改为:

<td >Do you accept Terms of Service agreement?</td>
<td  style="min-width: 10px"></td>
<td >
    <input type="checkbox" name="TOS" value="Accept" onClick="EnableSubmit(this)"> I agree to Terms of Service agreement.
</td>

它不起作用的原因:你没有传递你的函数任何东西。实际上,因为您没有在函数名称中使用括号,所以您根本没有调用该函数。在 onclick HTML 事件属性的上下文中传递 this 意味着您正在传递对元素的 DOM 对象的引用,从而可以访问其 checked 属性。

【讨论】:

您能否重新输入您的问题以包含表单的其余来源(HTML)?以及您可能正在使用的任何其他 javascript【参考方案2】:

需要包含参数:onClick="EnableSubmit()"

 <input type="checkbox" name="TOS" value="Accept" onClick="EnableSubmit()"> I agree to Terms of Service agreement.

【讨论】:

【参考方案3】:

首先 if 条件检查是否切换到所需的一侧。条件可以根据需要改变。 最后一个 jquery 是将切换按钮设为灰色。

 if(!$('#togglehk').is(":checked"))
                    
                        $('#togglehk').click();
                    
  jQuery('#togglehk').attr("disabled", true);
  jQuery('#togglehk').prop("disabled",true);

  jQuery('#togglehk').next(".slider").css("backgroundcolor","#B3B3B3");

【讨论】:

以上是关于如果选中/取消选中复选框,则启用/禁用提交按钮?的主要内容,如果未能解决你的问题,请参考以下文章

如果所有复选框都未选中,则禁用按钮,如果至少选中一个,则启用它

如果复选框选中禁用其他,如果未选中启用所有 JavaScript?

禁用或启用复选框已选中事件的提交按钮

Angular2,如果没有选中复选框,则禁用按钮

如果选中任一复选框,则启用和禁用文本字段

使用复选框启用/禁用按钮