在单击禁用复选框时运行函数

run function onclick of disabled checkbox

本文关键字：运行 函数 复选框 单击      更新时间：2023-09-26

我有一个复选框，我不希望用户直接访问。我希望他们接受一些条款。为此，我希望他们能够单击一个禁用的复选框，该复选框会打开包含术语的迷你弹出窗口（不选中该框），以便读者可以阅读并接受它们。一旦他们接受它们，弹出窗口将关闭，复选框将被选中。我遇到的问题是我无法弄清楚在单击禁用复选框时运行函数。

处理禁用元素的单击确实很棘手......但无论如何，我认为这不是理想的用户体验。 如果复选框被禁用，一些用户会看到它，甚至不愿意尝试单击它。 相反，请考虑截获单击事件并使用 preventDefault 将其用于您自己的目的。 

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

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

的复选框可能无法正确处理点击事件，并且将显示为"已禁用"。

但是，您可以尝试以下操作：

  • 在复选框中添加属性以存储是否显示弹出窗口（例如，data-popup="0"）
  • 处理复选框上的 onClick 事件
  • 如果显示弹出窗口（data-popup="1"），只需返回 true 以允许用于检查它
  • 如果未显示弹出窗口（data-popup="0"），则阻止默认行为，设置 data-popup="1" 并显示带有条款和条件的弹出窗口

根据弹出窗口的设计，另一项改进可能是在该弹出窗口中添加一个新复选框，当用户阅读条款和条件时，他可以直接从弹出窗口接受条款和条件。如果这样做，则需要处理弹出窗口中复选框上的单击事件，并自动选中页面上的复选框。

@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>
相关文章：