Setting textbox property on uncheck of checkbox not working

Question

I have a group of checkboxes with name as settingcheck. With each checkbox, a textbox is associated. If the textbox contains value from db, then the corresponding checkbox will be checked. Otherwise the textbox will be disabled and will only enabled once the checkbox corresponding to it is checked. Upto this is working well.

The problem is, when the textbox doesn't contain any value, then it will be enabled only if the checkbox is checked. But when it is unchecked, the textbox is not disabling. It is still enabled once it is checked. How to disable the textbox once the checkbox is unchecked.

HTML

{loopstart:setting:100} 
{if($setting%2==0)}
<tr height="30">
{endif}
<td align="left">   
<input type="checkbox" class="check" name="settingcheck" id="setting{$setting[0]}" value="{$setting[0]}" {cfn:getcriteria($setting[0])} />{$setting[1]}
</td>
<td>
<input type="text" size="2px" id="text{$setting[0]}" value={if($setting[2]!=0)} {$setting[2]} {endif}>
</td>
{if($setting%2==1)}
<td>&nbsp;</td> 
{endif} 
{loopend:setting}

Resultant HTML

<tr height="30">
<td align="left">   
<input type="checkbox" class="check" name="settingcheck[]" id="setting1" value="1" checked="checked" />Basic Details
</td>
</td>
<input type="text" size="2px" id="text1" value= 20 >
</td>
<td align="left">
<input type="checkbox" class="check" name="settingcheck[]" id="setting2" value="2"  />Physical Details
<td>
<input type="text" size="2px" id="text2" value=''>
</td>
<td>&nbsp;</td> 
<tr height="30">
<input type="checkbox" class="check" name="settingcheck[]" id="setting3" value="3"  />Family Details
<td>
<input type="text" size="2px" id="text3" value=''>  
</td>
<td align="left">
<input type="checkbox" class="check" name="settingcheck[]" id="setting4" value="4"  />Hobbies and Interests 
<td>
<input type="text" size="2px" id="text4" value=>
</td>
<td>&nbsp;</td></tr>

JQuery

$(document).ready(function(){
    $('.check').each(function()
             {
         var val=$(this).val();
         if ($(this).is(':checked'))
         {

             $("#text"+val).prop("disabled",false); 
                $("#text"+val).css("background-color", "");
         }
         else
         {
             $("#text"+val).prop("disabled",true); 
                $("#text"+val).css("background-color", "#ccc");
         }
             });
});

The above code is working well.

$(document).on('change', 'input[name="settingcheck"]:checked', function() 
    {
        var val=$(this).val();

        if ($(this).is(':checked'))
        {

        $("#text"+val).prop("disabled",false); 
        $("#text"+val).css("background-color", "");
        }
        else
        {
            $("#text"+val).prop("disabled",true); 
            $("#text"+val).css("background-color", "#ccc");
        }
    });

In this code, the code for unchecked condition is not working. Any problem with the code? Thanks in advance for any help.

can you share the generated html

Arun P Johny
– Arun P Johny

2013-12-12 08:57:19 +00:00
Commented Dec 12, 2013 at 8:57 — Arun P Johny
– Arun P Johny, Commented Dec 12, 2013 at 8:57
plz see the updated question for the HTML code

Jenz
– Jenz

2013-12-12 09:03:40 +00:00
Commented Dec 12, 2013 at 9:03 — Jenz
– Jenz, Commented Dec 12, 2013 at 9:03

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

1

it is because of the dynamic element selector. the :checked selector at in the element causes the event handler to be fired only if the element selected

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

    if (this.checked) {
        $("#text" + val).prop("disabled", false);
        $("#text" + val).css("background-color", "");
    } else {
        $("#text" + val).prop("disabled", true);
        $("#text" + val).css("background-color", "#ccc");
    }
});

Demo: Problem, Solution, Demo2

edited Dec 12, 2013 at 9:09

answered Dec 12, 2013 at 8:58

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Collectives™ on Stack Overflow

Setting textbox property on uncheck of checkbox not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related