使用jQuery切换隐藏/显示表单提交按钮基于被选中的复选框 - 如何设置提交按钮默认切换？

我有一个我正在使用的表单，因此我想要检查一个复选框（'条款'）以切换提交按钮（'checkout-submit'）。一旦你选中复选框，然后取消选中，我就可以正常工作了。等等。使用jQuery切换隐藏/显示表单提交按钮基于被选中的复选框 - 如何设置提交按钮默认切换？

但是，默认情况下提交按钮正在显示。我不确定我的代码如何确保在页面加载时切换提交按钮。

$('#terms').click(function() { 
$("#checkout-submit").toggle(this.checked); 
});

来源

2016-03-04 Cltcoder

我已经取得了一些进展，同时坚持切换......我已经添加了.hide jQuery效果到'checkout-submit'按钮，这很好，技术上也是诀窍。 $（'＃checkout-submit'）。hide（）; （'＃terms'）。click（function（）{（“＃checkout-submit”）。toggle（this.checked）; }）; 剩下的唯一问题是，当页面加载时，您可以在隐藏之前看到提交按钮。 – Cltcoder

你可以做这样的事情：

$('#your_checkbox').click(function() { 
    if ($(this).is(':checked')) { 
     $('#your_button').removeAttr('disabled'); 

    } else { 
     $('#your_button').attr('disabled', 'disabled'); 
    } 
}); 
//set it to disabled at load 
$('#your_button').attr('disabled', 'disabled');

小提琴http://jsfiddle.net/t70cc43o/1/

来源

2016-03-04 00:55:33 Cory

感谢您的建议 - 我在您提出建议后尝试了这个建议，并且出于某种原因，它对我无效。我尝试了其他类似的解决方案，试图将提交按钮的默认状态设置为禁用，但无济于事。代码中可能会有一些重写。我不确定。表单中有相当多的自定义脚本处理。 – Cltcoder

另一种方法是把布尔属性required上的复选框，像这样

<input type="checkbox" required>

然后如果用户尝试提交而未检查框，则为nati ve html5对话框（看起来相当不错）出现，说你必须选中复选框才能继续。用户可以随意多次提交提交，但在复选框被选中之前不会发生任何事情。请注意，所有这些都必须位于form元素内。

来源

2016-03-04 00:58:15

嗨 - 感谢您的建议。不幸的是，我们并没有真正“提交”表单，而是触发了一些自定义脚本来处理表单。因此，它不会检查该框是否被选中。否则，这将是理想的解决方案。 – Cltcoder

是的，在表单提交处理程序中调用'e.preventDefault（）'很常见，然后运行自定义脚本。我在单页应用上工作很多，所以这对我来说是标准做法。我喜欢利用HTML5表单验证，只要我可以。 –

使用jQuery切换隐藏/显示表单提交按钮基于被选中的复选框 - 如何设置提交按钮默认切换？

回答

相关问题