Question

我有一个网页应该可以轻松编写另一个程序（Ren'Py）的代码，我创建的方式是有一个按钮可以添加3个输入（复选框，文本，文本）。现在我想这样做，以便第一个输入被禁用，并且只有在选中复选框时才会启用。

我已经看过很多其他类似的问题，但似乎没有一个问题有帮助，我在静态运行中编写了一个代码，因此代码已经存在。但它应该适用于所有这些，即使添加了新的。

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>

这是静态运行（JS Fiddle）：https://jsfiddle.net/DiamondFrost/1dsdd2Lx/

Answer 1

在设置事件处理程序时，复选框不存在，因此请在document上设置并使用 JQuery's event delegation ，以便复选框将来会被创造出来。

此外，JQuery不久前弃用了.change()方法，并且只是使用.on()方法进行所有事件绑定。

最后，默认情况下将文本字段设置为disabled，因为默认情况下不会选中复选框。

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>

Answer 2

当您将复选框动态添加到DOM

时

在解析主函数时，它们不存在，动态执行此操作

而不是

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

试

$(document).on("change", ":checkbox", function () {

如何使用复选框JQuery禁用输入

2 个答案: