CODEWITHSUNDEEP
javascriptphpjquerycheckbox
Jenz
Jenz

Reputation: 8369

Checkbox click function not working

I have a group of checkboxes with same name. One textbox is associated with each checkbox. On page load, I am disabling all the textboxes. On click of each checkbox, the textbox corresponding to the checkbox should be enabled.

The problem is that, I tried with different codes to enable the textbox on checkbox click. But the checkbox click function is not working.

The code is as given below (I am using MVC framework):

{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");

});

This code is for disabling all textboxes on page load and is working fine.

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

}

I wrote the above function for enabling the text box on corresponding checkbox click. But this function is not working. I tried alerting some text in this function.

Is there any problem in the code. Can anyone help me to solve this. Thanks in advance.

Upvotes: 1

Views: 9111

Answers (6)

Arun P Johny
Arun P Johny

Reputation: 388436

Your string literal is not properly formed: since you have used '' to enclose the literal all occurrences of ' within the string have to be escaped('input[name=\'settingcheck\']:checked') or you can use "" instead

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

Upvotes: 9

Sudarshan Tanwar
Sudarshan Tanwar

Reputation: 3607

Working Demo

You can try like this :

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

    }

Upvotes: 0

Ringo
Ringo

Reputation: 3967

Try this:

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

Upvotes: 0

Harish Singh
Harish Singh

Reputation: 3329

If not already checked you can try this

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

see demo

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20418

Try this

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

});

OR

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

});

OR

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

}

Upvotes: 0

Satish Sharma
Satish Sharma

Reputation: 9635

try this

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

}

Upvotes: 0

Related Questions