Question

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

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

代码如下所示（我使用的是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() {

}

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

代码中是否有任何问题。任何人都可以帮我解决这个问题。提前谢谢。

Answer 1

您的字符串文字格式不正确：因为您已使用''来封闭字面值，所有字符串中的'必须被转义（'input[name=\'settingcheck\']:checked'），或者您可以使用而是""

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

Answer 2

如果尚未检查，您可以试试这个

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

请参阅demo

Answer 3

试试这个

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

}

Answer 4

试试这个：

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

Answer 5

试试这个

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

});

OR

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

});

OR

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

}

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

    }

复选框单击功能不起作用

6 个答案: