Add onclick to disabled input boxes

Question

I have a table in which there are checkboxes, some checkboxes are disabled. I want to add an onclick attribute to all disabled checkboxes using JavaScript or jQuery.

HTML

<table class="docs_table" id="myTable2">
<tr id="node-22" class="disabled_element">
<td title="Document can't be selected.">
    <input type="checkbox" name="docs" id="/root/docname" value="/root/docname" disabled />
</td>
</tr>
<tr id="node-23" class="">
<td title="">
    <input type="checkbox" name="docs" id="/root/docname2" value="/root/docname2" />
</td>
</tr>
<tr id="node-24" class="disabled_element">
<td title="Document can't be selected.">    
    <input type="checkbox" name="docs" id="/root/docname3" value="/root/docname3" disabled />
</td>
</tr>
</table>

In above code the docname input box should get below as onclick.

onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&name=docname'};return false;"

and docname3 should get the below

onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&name=docname3'};return false;"

What I tried

 $('table tr td input[type="checkbox"]').each(function () {
    if ($( this ).prop('disabled')) {
        $( this ).closest('tr').addClass('lineThrough');
        $( this ).attr('onClick','onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&amp;name=docname'};return false;"');
    }
});

But it doesn't work, and also I wonder how to deal with different docname because in onclick statement name=docname will be different for each input box.

Fiddle

And of course your code won't work - you're not properly quoting the attribute value. You shouldn't be setting the `onclick` attribute with jQuery when you can correctly bind events with `.on()` — Ian, Aug 13 '13 at 06:32
@ChankeyPathak We can add it to closest td but that wouldn't give the same feel as clicking on the checkbox right? Anyways, you can have a look at this [**fiddle**](http://jsfiddle.net/hari_shanx/9k8kp/) for the closest click. Remember to click just outside the checkbox. — Harry, Aug 13 '13 at 06:33
@Harry That defeats the purpose of clicking on the checkbox... — Ian, Aug 13 '13 at 06:34
@Ian: Yes mate, I have mentioned that in my comment too, but just showed a sample on how to do the closest td click. — Harry, Aug 13 '13 at 06:36
@Harry: Your solution adds `onclick` to disabled checkboxes, but it doesn't change `name=docname` to `name=docname3` for 3rd checkbox. — Chankey Pathak, Aug 13 '13 at 06:38
@ChankeyPathak: I did it just to show a sample of the click event mate. If you want to proceed with this way, I will modify the code for you. But I suggest you to have a look at Pietu1998's answer first. — Harry, Aug 13 '13 at 06:44
@Harry: OK. Yes, I see that. I would like to see your complete answer. Although Pietu's answer is the best way but I can't add extra divs in HTML, see my comment on his answer. Thanks :) — Chankey Pathak, Aug 13 '13 at 06:56
@ChankeyPathak: Please check this [**fiddle**](http://jsfiddle.net/hari_shanx/9k8kp/). If you are Ok with it, I will add it as an answer. — Harry, Aug 13 '13 at 07:25

score 4 · Answer 1 · edited May 23 '17 at 12:11

4

I did it using this answer.

<table class="docs_table" id="myTable2">
    <tr id="node-22" class="disabled_element">
        <td title="Document is being edited by someone.">
            <div style="display:inline-block; position:relative;">
                <input type="checkbox" name="docs" id="/root/docname" value="/root/docname" disabled />
                <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
            </div>
        </td>
    </tr>
    <tr id="node-23" class="child">
        <td title="">
            <input type="checkbox" name="docs" id="/root/docname2" value="/root/docname2" />
        </td>
    </tr>
    <tr id="node-22" class="disabled_element">
        <td title="Document is being edited by someone.">
            <div style="display:inline-block; position:relative;">
            <input type="checkbox" name="docs" id="/root/docname3" value="/root/docname3" disabled />
                <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
            </div>
        </td>

 $('table tr td input[type="checkbox"] + div').each(function () {
     if ($(this).prev('input[disabled]')) {
         $(this).closest('tr').addClass('lineThrough');
         $(this).click(function () {
             if (confirm('Press OK to confirm')) {
                 var docname = $(this).prev('input[disabled]').prop('value');
                 docname = docname.substring(docname.lastIndexOf('/') + 1);
                 document.location = '/pathtoscript?command=dosomething&amp;name=' + docname;
             }
         });
     }
 });

Disabled elements don't generate mouse events. So basically what I did is added a div around the disabled inputs and added some JS to match it.

JSFiddle

edited May 23 '17 at 12:11

Community

1
1

answered Aug 13 '13 at 06:39

PurkkaKoodari

6,703
6
37
58

2

This is the only real way to deal with mouse events on disabled inputs – Ian Aug 13 '13 at 06:41
Thanks, but I want `name=docname` on `onclick` to be different for 1st and 3rd checkbox. For 1st it will be `name=docname` but for 3rd it will be `name=docname3`. – Chankey Pathak Aug 13 '13 at 06:44
2

@ChankeyPathak OK, modified code to do that based on the string in the `value` attribute after the last `/` in it. – PurkkaKoodari Aug 13 '13 at 06:48
Thanks @Pietu1998. But I can't modify my HTML to add `div`. So can this `div` be added to disabled checkboxes using jQuery only? – Chankey Pathak Aug 13 '13 at 06:51
Trying to do that but I have to go to school. It is giving me `TypeError: this._containers is undefined`. If somebody wants they can fix it: http://jsfiddle.net/Xnwwg/5/ – PurkkaKoodari Aug 13 '13 at 07:02
OK. You're using your HTML, you should use mine (from question), where there's no div and try to add div from jQuery. I'm not in hurry, you can have a look at it in evening, thanks for your efforts. – Chankey Pathak Aug 13 '13 at 07:07
I'm somewhat successful to add `div` using jQuery but the first `div` is automatically adding ending `` tag which should not happen. http://jsfiddle.net/Xnwwg/6/ – Chankey Pathak Aug 13 '13 at 07:21

score 1 · Accepted Answer · answered Aug 13 '13 at 07:55

In case, it is not possible for you to change your existing HTML structure and want to perform the action on click of the closest <td> element, please use the below code.

Javascript (jQuery)

$(document).ready(function(){
$('table tr td input[type="checkbox"]').each(function () {
    if ($( this ).prop('disabled')) {
        $( this ).closest('tr').addClass('lineThrough');
        var valStr = $(this).val();
        $( this ).closest('td').attr('onClick', 'clickFn("'+valStr+'");');
        //console.log($( this ).closest('td').attr('onClick'));
    }});
});

function clickFn(valStr){ 
    if(confirm('Press OK to confirm')){ 
        valStr = valStr.substring(valStr.lastIndexOf('/') + 1);
        newHref = '/pathtoscript?command=dosomething&amp;name=' +valStr;
        //console.log(newHref);
        document.location = newHref;
    }
}

Demo

Add onclick to disabled input boxes

2 Answers2