将 onclick 添加到禁用的输入框答案

【问题标题】：Add onclick to disabled input boxes将 onclick 添加到禁用的输入框
【发布时间】：2013-08-13 06:23:53
【问题描述】：

我有一个表，其中有复选框，一些复选框被禁用。我想使用 JavaScript 或 jQuery 为所有禁用的复选框添加一个 onclick 属性。

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>

在上面的代码中，docname 输入框应该在下面作为 onclick。

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

和docname3 应该得到以下内容

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

我尝试了什么

 $('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;"');
    }
});

但它不起作用，我也想知道如何处理不同的docname，因为在onclick语句中name=docname对于每个输入框都会有所不同。

Fiddle

【问题讨论】：

禁用的输入不会注册许多/所有事件
那么onclick可能会添加到最近的<td>或<tr>。
当然你的代码不会工作——你没有正确引用属性值。当您可以使用 .on() 正确绑定事件时，您不应该使用 jQuery 设置 onclick 属性
@ChankeyPathak 我们可以将它添加到最近的 td 中，但这与单击复选框的感觉不同吧？无论如何，您可以查看此fiddle 以获得最近的点击。请记住在复选框外单击。
@Harry 这违背了点击复选框的目的......

【解决方案1】：

我是使用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;
             }
         });
     }
 });

禁用的元素不会生成鼠标事件。所以基本上我所做的就是在禁用的inputs 周围添加一个div 并添加一些JS 来匹配它。

JSFiddle

【讨论】：

这是在禁用输入上处理鼠标事件的唯一真正方法
谢谢，但我希望onclick 上的name=docname 在第一个和第三个复选框中有所不同。第一次是name=docname，但第三次是name=docname3。
@ChankeyPathak 好的，修改代码以根据其中最后一个/ 之后的value 属性中的字符串来执行此操作。
谢谢@Pietu1998。但我无法修改我的 HTML 以添加 div。那么这个div 是否可以仅使用 jQuery 添加到禁用的复选框中？
试图这样做，但我必须去上学。它给了我TypeError: this._containers is undefined。如果有人想要他们可以修复它：jsfiddle.net/Xnwwg/5

【解决方案2】：

如果您无法更改现有的 HTML 结构并希望在点击最近的<td> 元素时执行操作，请使用以下代码。

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

【讨论】：