防止复选框在单击时取消选中（不禁用或只读）

Posted 2023-02-22

【中文标题】防止复选框在单击时取消选中（不禁用或只读）

【英文标题】：Prevent checkbox from unchecking when clicked (without disable or readonly)

【发布时间】：2012-08-21 18:06:35

【问题描述】：

我正在使用一个复选框，我希望人们能够选中/取消选中它。 但是，当他们取消选中它时，我正在使用 jQueryUI 模式弹出窗口来确认他们确实想要这样做。因此，他们可以单击 OK 或 Cancel，并且我希望只有在他们单击 OK 时才取消选中我的复选框。 这就是为什么我想捕捉 uncheck 事件以防止在视觉上取消选中复选框，并在用户碰巧单击 OK 时自行以编程方式取消选中它。

我该怎么做？

PS：我知道如果用户单击 Cancel 后我可以重新检查它，但这会触发我不想要的check 事件。

【参考方案1】：

$("#checkboxID").on("click", function (e) 
    var checkbox = $(this);
    if (checkbox.is(":checked")) 
        // do the confirmation thing here
        e.preventDefault();
        return false;
    
);

【讨论】：

我认为这个答案可能与提问者想要的相反。实施它使我无法选中复选框，而不是取消选中它们。我加了“！”到 if 条件，一切都很好。

是的，这与防止复选框被取消选中相反

【参考方案2】：

类似：

$("#test").on('change', function() 
    this.checked=!this.checked?!confirm('Really uncheck this one ?'):true;
);
​

FIDDLE

【讨论】：

+1 不错。你也可以让它更短/更清晰：this.checked = this.checked || !confirm('Really uncheck this one ?');

我完全错了，但我不能再改变我的反对票了，对不起

【参考方案3】：

纯 CSS 解决方案

选择复选框喜欢 -

input[type="checkbox"] 
    pointer-events: none;

效果很好，现在您可以在您选择的任何元素点击上切换您的复选框。

【讨论】：

这是一个非常简单的解决方案 +1

这非常简洁，但是当你有一个指向它的标签时它会失败，因为它绕过了这个。

【参考方案4】：

   $("#checkboxID").click(function(e)  
      var checkbox = $(this);
      if (checkbox.is(":checked")) 
       //check it 
       else 
       // prevent from being unchecked
        this.checked=!this.checked;
      
   );

【讨论】：

您的答案代码格式错误，一些 cmets 或解释肯定会有所帮助

【参考方案5】：

如何使用 html disabled 属性？

<input type="checkbox" name="my_name" value="my_value" disabled> My value<br>

链接： https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled

【讨论】：

这是确保复选框未被取消选中的最有效方法，因为它不会回复任何 javascript。如果您不需要运行 javascript，请不要运行。节省处理能力并保持较小的 javascript 文件大小以实现快速页面交付。

虽然我用的是这个reference，但是标题说没有readonly或者disable

【参考方案6】：

$("#yourCheckBoxId").on('change',function(e)
    e.preventDefault();
    $("#yourPopDiv").popup();
);

preventDefault() 将禁用 input[type="checkbox"] 的默认行为

在你的弹出 div 上

$("#ok").on('click',function()
    $("#yourCheckBoxId").attr("checked",true);
);

【讨论】：

如果有任何奇怪的 UI 覆盖，OP 也可以使用 stopPropagation() 来阻止它。我知道 jQuery UI 有奇怪的覆盖来控制主复选框......所以有时对我有帮助:)