CODEWITHSUNDEEP
javascriptjqueryfunctiontoggle
Paul
Paul

Reputation: 3368

Changing text with a toggle function

I made my checkmark input have a toggle function to show/hide an input box, but what I am trying to do is get two different options of text to fade in with the toggle choice ( and obviously since the checkmark is true on page load, for the appropriate text to show on load too).

When the checkbox input is true, I want it to say,Enabled.

When the checkbox input is false, I want it to say, Turned Off.

How can I do this?

// 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>

Upvotes: 1

Views: 86

Answers (1)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

You should include two divs that contain your texts and toggle between them according to checkbox change.

// 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>

Upvotes: 1

Related Questions