0

I have a webpage that is supposed to ease the writing of code for another program (Ren'Py), and I made it in a way that there is a button that adds 3 inputs (checkbox, text, text). Now I wanted to make it so that the first input is disabled and will only enable when the checkbox is checked.

I have looked at many other questions just like this, but none seemed to help, I made a fiddle of the code working in a static run, so where the code is already there. But It should work for all of them, even if there is a new one added.

var i = 0 //the variable is for a later cause, doesn't affect this, isn't implemented yet
function addDialogue() {
 ++i
 var poseLine = '<input type="checkbox" id="poseBox' + i + '" class="pose" />\n<input id="pose' + i + '"  />'
 var text = '<input id="text' + i + '" >'
 var breaker = '<br />'
 var line = poseLine + text + breaker
 $( "#dialogeAndCode" ).append( line )
}

function main () {
 console.log( "JQuery has loaded" )
 $( ":checkbox" ).change( function() {
  if ( $( this ).hasClass( "pose" ) ) {
   $( this ).next().prop( "disabled", !$( this ).is( ':checked' ) );
  }
 } );
}

$( document ).ready( main );
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<input type="button" id="buttonAddText" value="Add a dialoge line" onclick="addDialogue();">
<br />
<div id="dialogeAndCode">
</div>

and here's the static run (JS Fiddle): https://jsfiddle.net/DiamondFrost/1dsdd2Lx/

Lilly
  • 107
  • 1
  • 1
  • 8

2 Answers2

1

The checkboxes don't exist at the time that you are setting up the event handler, so set it up on the document and use JQuery's event delegation so that checkboxes that get created in the future will be picked up.

Additionally, JQuery deprecated the .change() method some time ago and says to just use the .on() method for all event binding.

Lastly, set the text fields to be disabled by default because your checkboxes are not checked by default.

var i = 0 //the variable is for a later cause, doesn't affect this, isn't implemented yet
function addDialogue() {
 ++i
  // Set the textbox to be disabled by default
 var poseLine = '<input type="checkbox" id="poseBox' + i + '" class="pose">\n<input disabled id="pose' + i + '">'
 var text = '<input id="text' + i + '" >'
 var breaker = '<br />'
 var line = poseLine + text + breaker
 $( "#dialogeAndCode" ).append( line )
}

function main () {
 console.log( "JQuery has loaded" )
  
  // Set up the event on the document, but trigger it if the source of it
  // was a checkbox
 $(document).on("change", "input[type=checkbox]", function() {
  if ( $( this ).hasClass( "pose" ) ) {
   $( this ).next().prop( "disabled", !$( this ).is( ':checked' ) );
  }
 } );
}

$( document ).ready( main );
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<input type="button" id="buttonAddText" value="Add a dialoge line" onclick="addDialogue();">
<br />
<div id="dialogeAndCode">
</div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

As you are adding the checkboxes dynamically to the DOM

they are not existent while parsing your main function, to do this dynamically

instead of

$( ":checkbox" ).change( function() {

try

$(document).on("change", ":checkbox", function () {
john Smith
  • 17,409
  • 11
  • 76
  • 117