如何在单击禁用复选框时显示警报？ [英] How Do I Show Alert On Clicking On Disabled Checkbox?

问题描述

我有以下问题。

在某种情况下我的网页上有复选框，所以

时复选框被禁用，如果我点击它们它应该显示一个警告框，

在enble它应该像往常一样工作，不要显示任何警报。



是否可以在禁用的复选框上绑定点击事件？

Hi,
I have the following issue.
By some condition I have checkbox in my web page,So
when the checkbox is disabled ,if I click on them it should show a alert box,
upon enble it should work as usual,dont show any alert.

Is it possible to bind a click event on disabled checkbox?

推荐答案

你不能直接做。你必须用一些元素包装它，然后为该包装元素编写onclick事件。



演示 - http://jsfiddle.net/taditdash/rja26hcn/ [ ^ ]。



但这是一个非常奇怪的要求。 ：）

You can't do directly. You have to wrap it with some element and then write onclick event for that wrapper element.

Demo - http://jsfiddle.net/taditdash/rja26hcn/[^].

But this is a very weird requirement. :)

这是一个糟糕的UI设计，所以不要这样做。这样的事情在浏览器中可能不一样，具体取决于你如何解决这个问题。



控件启用并响应用户点击或控件被禁用，并且不响应用户点击。



如果您想告诉您的用户某些信息，请直接将其写在控件旁边的网页上或添加复选框旁边的信息按钮会在您单击该按钮时显示该消息。



您必须记住，用户不会知道它可以单击禁用复选框，这样就没有人会尝试它，因此您将有浪费时间来实现它。

This is a bad UI design so don't do it. Also things like that might not works the same across browser depending on how you try to work around that.

Either the control is enabled and respond to user click or the control is disabled and does not respond to user click.

If you want to tell some information to your user then write it directly on the web page next to the control or add an "Info" button next to the check box that would display the message when you click on that button.

You have to remember that users won't know that it is possible to click on a disable check box so no one will try it so you would have waste time to implement it.

这是您可能要考虑的复选框覆盖方法。 />

Here is a checkbox overlay method you may want to consider.

.CheckBoxOverlay{
    position:relative;
    display:inline;
}
.CheckBoxOverlay div{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    cursor: pointer;
}

function showAlert(EleOverlay,CBIdent) {
    var oCB=document.getElementById(CBIdent);
    if (oCB.disabled) {
        alert("CheckBox is Disabled");
    }
    else{
        EleOverlay.style.display="none";
        oCB.checked=!oCB.checked;
    }
};

<div class="CheckBoxOverlay">
  <input id="AAA" type="checkbox" disabled="disabled" />
  <div onclick="showAlert(this,'AAA')"></div>
</div>
<div class="CheckBoxOverlay">
  <input id="BBB" type="checkbox" disabled="disabled" checked="checked" />
  <div onclick="showAlert(this,'BBB')"></div>
</div>
<div class="CheckBoxOverlay">
  <input id="CCC" type="checkbox"/>
  <div onclick="showAlert(this,'CCC')"></div>
</div>
<div class="CheckBoxOverlay">
  <input id="DDD" type="checkbox" checked="checked"/>
  <div onclick="showAlert(this,'DDD')"></div>
</div>

小提琴： http://jsfiddle.net/dz2gdu30/ [ ^ ]



为添加包装和叠加元素而烦恼：

http://jsfiddle.net/dz2gdu30/1/ [ ^ ]

http：/ /jsfiddle.net/dz2gdu30/2/ [ ^ ]



修改自： http://jsfiddle.net/RXqAm/170/ [ ^ ]

< a href =http://stackoverflow.com/questions/3100319/event-on-a-disabled-input> http://stackoverflow.com/questions/3100319/event-on-a-disabled-input [ ^ ]

和解决方案1 ​​

fiddle at: http://jsfiddle.net/dz2gdu30/[^]

fiddles to add wrapper and overlay elements:
http://jsfiddle.net/dz2gdu30/1/[^]
http://jsfiddle.net/dz2gdu30/2/[^]

modified from: http://jsfiddle.net/RXqAm/170/[^]
http://stackoverflow.com/questions/3100319/event-on-a-disabled-input[^]
and Solution 1

这篇关于如何在单击禁用复选框时显示警报？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！