我有一个复选框,我不希望用户有直接访问。我希望他们接受一些条款。要做到这一点,我希望他们能够在一个禁用的复选框,打开这个迷你弹出点击(不勾选复选框)包含条款,以便读者可以阅读并接受它们。一旦他们接受它们,弹出窗口将关闭,复选框将被选中。我的问题是我无法想象out来运行一个功能onclick的禁用复选框.
yftpprvb1#
处理被禁用元素上的点击确实很棘手.但我不认为这是理想的用户体验。如果复选框被禁用,一些用户会看到这一点,甚至不愿意尝试点击它。相反,考虑使用 preventDefault 拦截click事件并将其用于自己的目的。
<input type='checkbox' id="cb" name="cb" /> $(document).ready(function() { $("#cb").click(function(e) { // cancel click event so that checkbox remains unchecked e.preventDefault(); // display popup here, then manually check the checkbox if needed } });
字符串
wwwo4jvm2#
$('#chk').click(function () { if (confirm('Accept')) { $(this).attr('checked', 'checked'); } else { $(this).attr('checked', false); } });
gmxoilav3#
禁用的复选框可能无法正确处理单击事件,并将显示为“禁用”。但是,你可以试试这个:
另一个改进,取决于你的弹出窗口的设计,可以在弹出窗口中添加一个新的复选框,当用户阅读条款和条件时,他可以直接从弹出窗口接受条款和条件。如果你这样做,你需要处理弹出窗口中复选框上的点击事件,并自动选中页面上的复选框。
7jmck4yq4#
@dbaseman这是我的代码。看一下。在这里,我在div上得到警报,而不是在复选框上。
<html> <head> <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#checkbox, #hello").click(function(){ alert("hello"); }); }); </script> </head> <body> <div id="checkbox"> <p> hello</p> <input type="checkbox" id="hello" disabled="disabled" /> </div> </body> </html>
yfwxisqw5#
您可以通过在禁用的复选框上覆盖一个透明的div来实现这一点,并在点击时让div触发弹出窗口。可能不是最好的用户体验,因为用户很可能不会与禁用的复选框交互,但它应该实现您想要的。
.checkbox-wrapper { position: relative; } .checkbox-overlay { width: 100%; height: 100%; position: absolute; }
个字符
5条答案
按热度按时间yftpprvb1#
处理被禁用元素上的点击确实很棘手.但我不认为这是理想的用户体验。如果复选框被禁用,一些用户会看到这一点,甚至不愿意尝试点击它。相反,考虑使用 preventDefault 拦截click事件并将其用于自己的目的。
字符串
wwwo4jvm2#
字符串
gmxoilav3#
禁用的复选框可能无法正确处理单击事件,并将显示为“禁用”。
但是,你可以试试这个:
另一个改进,取决于你的弹出窗口的设计,可以在弹出窗口中添加一个新的复选框,当用户阅读条款和条件时,他可以直接从弹出窗口接受条款和条件。如果你这样做,你需要处理弹出窗口中复选框上的点击事件,并自动选中页面上的复选框。
7jmck4yq4#
@dbaseman
这是我的代码。看一下。在这里,我在div上得到警报,而不是在复选框上。
字符串
yfwxisqw5#
您可以通过在禁用的复选框上覆盖一个透明的div来实现这一点,并在点击时让div触发弹出窗口。可能不是最好的用户体验,因为用户很可能不会与禁用的复选框交互,但它应该实现您想要的。
个字符