Checkbox click function not working

Question

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.

Check out the syntax highlighting. Does settingcheck look like a variable color or a string color? ;) — Sterling Archer
– Sterling Archer, Commented Dec 12, 2013 at 6:04

stefanhorne · Accepted Answer · 2018-06-25 16:09:44Z

9

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

edited Jun 25, 2018 at 16:09

stefanhorne

1,6593 gold badges16 silver badges23 bronze badges

answered Dec 12, 2013 at 6:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jenz Over a year ago

I have already tried this code many times. It is not working for me.

Arun P Johny Over a year ago

@Jenz looks like you are using a template to generate the elements... so they are dynamic in nature... you may have to try event delegation

Harish Singh · Accepted Answer · 2013-12-12 06:08:31Z

1

If not already checked you can try this

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

see demo

answered Dec 12, 2013 at 6:08

Harish Singh

3,3195 gold badges27 silver badges40 bronze badges

Comments

Satish Sharma · Accepted Answer · 2013-12-12 06:04:04Z

0

try this

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

}

answered Dec 12, 2013 at 6:04

Satish Sharma

9,6356 gold badges31 silver badges52 bronze badges

Comments

Sridhar R · Accepted Answer · 2013-12-12 06:05:57Z

0

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() {

}

answered Dec 12, 2013 at 6:05

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-12-12 06:09:39Z

0

Try this:

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

edited Dec 12, 2013 at 6:09

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

answered Dec 12, 2013 at 6:04

Ringo

3,9873 gold badges25 silver badges38 bronze badges

Comments

Sudarshan Tanwar · Accepted Answer · 2013-12-12 06:24:12Z

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

    }

Collectives™ on Stack Overflow

Checkbox click function not working

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related