設置未選中複選框不工作的文本框屬性

我有一組複選框，名稱爲settingcheck。每個複選框都會關聯一個文本框。如果文本框包含來自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"); 
     } 
    });

在此代碼中，未檢查條件的代碼不起作用。代碼的任何問題？預先感謝您的幫助。

來源

2013-12-12 Jenz

你能分享生成的HTML –

PLZ看到了更新的問題HTML代碼 – Jenz

這是因爲動態元素選擇器。元素中的: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

來源

2013-12-12 08:58:47

感謝它的工作。 – Jenz

設置未選中複選框不工作的文本框屬性

回答

相關問題