jquery 运行功能onclick of disabled复选框

6ljaweal  于 11个月前  发布在  jQuery
关注(0)|答案(5)|浏览(138)

我有一个复选框,我不希望用户有直接访问。我希望他们接受一些条款。要做到这一点,我希望他们能够在一个禁用的复选框,打开这个迷你弹出点击(不勾选复选框)包含条款,以便读者可以阅读并接受它们。一旦他们接受它们,弹出窗口将关闭,复选框将被选中。我的问题是我无法想象out来运行一个功能onclick的禁用复选框.

yftpprvb

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
    }
});

字符串

wwwo4jvm

wwwo4jvm2#

$('#chk').click(function () {
            if (confirm('Accept')) {
                $(this).attr('checked', 'checked');
            }
            else {
                 $(this).attr('checked', false); }
        });

字符串

gmxoilav

gmxoilav3#

禁用的复选框可能无法正确处理单击事件,并将显示为“禁用”。
但是,你可以试试这个:

  • 在复选框中添加一个属性,以存储是否显示了弹出窗口(例如,data-popup=“0”)
  • 处理复选框上的onclick事件
  • 如果弹出窗口被显示(data-popup=“1”),只需返回true允许使用检查它
  • 如果未显示弹出窗口(data-popup=“0”),则阻止默认行为,设置data-popup=“1”并显示带有条款和条件的弹出窗口

另一个改进,取决于你的弹出窗口的设计,可以在弹出窗口中添加一个新的复选框,当用户阅读条款和条件时,他可以直接从弹出窗口接受条款和条件。如果你这样做,你需要处理弹出窗口中复选框上的点击事件,并自动选中页面上的复选框。

7jmck4yq

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>

字符串

yfwxisqw

yfwxisqw5#

您可以通过在禁用的复选框上覆盖一个透明的div来实现这一点,并在点击时让div触发弹出窗口。可能不是最好的用户体验,因为用户很可能不会与禁用的复选框交互,但它应该实现您想要的。

.checkbox-wrapper { position: relative; }
.checkbox-overlay { width: 100%; height: 100%; position: absolute; }

个字符

相关问题