How Do I Show Alert On Clicking On Disabled Checkbox?

Question

0.00/5 (No votes)

See more:

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?

Posted 6-Dec-14 2:10am

Prasanna Kumar Muduli

Add a Solution

4 solutions

Solution 4

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

CSS

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

JavaScript

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

HTML

<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>

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

Posted 10-Dec-14 22:30pm

jaket-cp

Updated 11-Dec-14 1:48am

v2

Solution 3

XML

<html>
    <head>
        <script type="text/javascript">
            function dcl(eve)
            {
                alert("Your Message");
            }
        </script>
    </head>
    <body>
        <div onClick="dcl(this)" style=width:18px;height:16px">
            <input type="checkbox" disabled="disabled">
        </div>
    </body>
</html>

Posted 10-Dec-14 1:59am

KARSHAN KHODBHAYA

Updated 10-Dec-14 2:00am

v2

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-12-06T02:56:00

Solution 1

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. :)

Posted 6-Dec-14 2:56am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

/\jmot 6-Dec-14 9:18am

+5, good idea. :)
and the requirement is really weird.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 6-Dec-14 9:42am

Thanks /\jmot. :)

Prasanna Kumar Muduli 7-Dec-14 5:48am

Thanks Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 7-Dec-14 6:21am

Welcome Prasanna. :)

Philippe Mori 10-Dec-14 10:27am

This is because of the "very weird requirement" that I did'nt even propose a solution similar to your but instead tell him to modify his UI design and proposed 2 ways to do so.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 10-Dec-14 11:15am

I know, it is a bad design. Still, I just suggested a work around. ;)

Your answer is good. :)

Member 12806981 10-Aug-17 13:39pm

It is not that weird..

It can happen that the user doesn't know why the control is disabled. I work on a software which can control a device. If the device is disconnected you can't create a new project. Sometimes customer contact the support because they can't see the connection.

For me it would be good, to show a message if a customer is desperate and tries to click on the disabled control.

Philippe Mori · Accepted Answer · 2014-12-06T03:07:00

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.

How Do I Show Alert On Clicking On Disabled Checkbox?

4 solutions

Solution 1

Solution 2

Solution 4

Solution 3

Add your solution here

Preview 0

How Do I Show Alert On Clicking On Disabled Checkbox?

4 solutions

Solution 1

Solution 2

Solution 4

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us