トグル関数でテキストを変更する

Question

チェックボックスの入力にトグル機能を使用して入力ボックスを表示/非表示にしましたが、私がしようとしていることは、トグル選択でフェードインする2つの異なるオプションを得ることですページの読み込み時にチェックマークがtrueであるため、読み込み時に適切なテキストが表示されるため）。

チェックボックスの入力が真である場合、私はそれがEnabledと言いたいと思います。

チェックボックスの入力がfalseの場合は、Turned Offとします。

どうすればいいですか？

// Checkbox checked and input disbaled when page loads 
 
    $('#TYemailCheck').prop('checked', true); 
 

 
    // Enable-Disable text input when checkbox is checked or unchecked 
 
    function TYenable(trigger, target) { 
 
     $(trigger).on('change', function() { 
 
      $(target).toggle(); 
 
     }); 
 
    } 
 
    TYenable("#TYemailCheck", "#TYemailEnabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="TYemailCheck"> 
 
<div id="TYemailEnabled"> 
 
    <input type="text"> 
 
</div>

Answer 1

あなたはcheckbox変化に応じてそれらの間であなたの文章とtoggleを含む2つのdivsを含める必要があります。

// Checkbox checked and input disbaled when page loads 
 
$('#TYemailCheck').prop('checked', true); 
 
$('#turnedOff').hide(); 
 
// Enable-Disable text input when checkbox is checked or unchecked 
 
function TYenable(trigger, target) { 
 
     $(trigger).on('change', function() { 
 
      $(target).toggle(); 
 
      $('#enabled, #turnedOff').fadeToggle(500); 
 
     }); 
 
} 
 
TYenable("#TYemailCheck", "#TYemailEnabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="TYemailCheck"><span id="enabled">Enabled</span><span id="turnedOff">Turned Off</span> 
 
<div id="TYemailEnabled"> 
 
    <input type="text"> 
 
</div>