Question

我有一组名称为设置检查的复选框。每个复选框都会关联一个文本框。如果文本框包含来自db的值，则将选中相应的复选框。否则，文本框将被禁用，只有在选中与其对应的复选框后才会启用。这很好用。

问题是，当文本框不包含任何值时，只有选中该复选框才会启用它。但是当取消选中时，文本框不会禁用。检查后仍然启用它。如果取消选中该复选框，如何禁用文本框。

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}

结果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");
         }
             });
});

以上代码运作良好。

$(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");
        }
    });

在此代码中，未经检查条件的代码无效。代码有问题吗？提前感谢您的帮助。

Answer 1

这是因为动态元素选择器。元素中的:checked选择器仅在选择了元素

时才会触发事件处理程序

$(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");
    }
});

演示：Problem，Solution，Demo2

在取消选中复选框不工作时设置文本框属性

1 个答案: