CODEWITHSUNDEEP
jquerycheckbox
Jenz
Jenz

Reputation: 8369

Setting textbox property on uncheck of checkbox not working

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.

Upvotes: 0

Views: 695

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

Related Questions