复选框单击功能不起作用答案

【问题标题】：Checkbox click function not working复选框单击功能不起作用
【发布时间】：2013-12-12 06:01:58
【问题描述】：

我有一组同名的复选框。一个文本框与每个复选框相关联。在页面加载时，我禁用了所有文本框。单击每个复选框时，应启用与该复选框对应的文本框。

问题是，我尝试使用不同的代码来启用复选框单击时的文本框。但是复选框单击功能不起作用。

代码如下（我使用的是MVC框架）：

{loopstart:setting:100}
 {if($setting%2==0)}
 <tr height="30">
 {endif}
 <td align="left">          
 <input type="checkbox" name="settingcheck" id="setting{$setting[0]}" value="{$setting[0]}"/>{$setting[1]}
</td>                                                   <td>                                                

<input type="text" size="2px" id="text{$setting[0]}">                                               


</td>

                                                {if($setting%2==1)}
                                                <td>&nbsp;</td> 
                                                {endif}     
                                    {loopend:setting}

JQuery

$(document).ready(function(){
    $("INPUT[type=text]").prop("disabled",true); 
    $("INPUT[type=text]").css("background-color", "#ccc");

});

此代码用于在页面加载时禁用所有文本框，并且工作正常。

$('input[name='settingcheck']:checked').click(function() {

}

我编写了上面的函数来启用相应的复选框单击时的文本框。但是这个功能不起作用。我尝试在这个函数中提醒一些文本。

代码有问题吗。谁能帮我解决这个问题。提前致谢。

【问题讨论】：

查看语法高亮。 settingcheck 看起来像可变颜色还是字符串颜色？ ;)

标签： javascript php jquery checkbox

【解决方案1】：

您的字符串文字格式不正确：由于您已使用 '' 将文字包含在字符串中所有出现的 ' 必须转义（'input[name=\'settingcheck\']:checked'）或者您可以改用""

$(document).on('change', 'input[name="settingcheck"]', function() {
    if(this.checked){
        //this is checked now
    } else {
        //this is unchecked now
    }
});

【讨论】：

这段代码我已经试过很多次了。它不适合我。
@Jenz 看起来您正在使用模板来生成元素...所以它们本质上是动态的...您可能需要尝试事件委托

【解决方案2】：

如果还没有检查，你可以试试这个

$('input[name="settingcheck"]').click(function() {
    if($(this).is(':checked')){
        alert('checked');
    }
})

见demo

【讨论】：

【解决方案3】：

试试这个

$('input[name="settingcheck"]:checked').click(function() {

}

【讨论】：

【解决方案4】：

试试这个

$('input[name="settingcheck"]:checked').on('click',function() {

});

或

$(document).on('click', 'input[name="settingcheck"]:checked', function() {

});

或

$(document).on('change', 'input[name="settingcheck"]', function() {

}

【讨论】：

【解决方案5】：

试试这个：

$("input[name='settingcheck']:checked").click(function() {
}

【讨论】：

【解决方案6】：

Working Demo

你可以这样试试：

<table>
    <tr>
        <td>
            <input type="checkbox" onclick="checkBoxClicked1(this)" />
        </td>
        <td>
            <input type="text" style="display: none">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" onclick="checkBoxClicked1(this)" />
        </td>
        <td>
            <input type="text" style="display: none">
        </td>
    </tr>
</table>

Javascript：

 function checkBoxClicked1(checkbox) {
        debugger;
        var a = $(checkbox).is(':checked');
        var textBox = $(checkbox).closest("tr").children()[1].children[0];
        if (a) {
            $(textBox).show();
            $(checkbox).prop("checked", true);
        } else {
            $(textBox).hide();
            $(checkbox).prop("checked", false);
        }

    }

【讨论】：