Question

这是示例代码，在其中单击复选框时我将禁用或启用文本框。

function enable_text(status) {
  status = !status;
  document.f1.other_text.disabled = status;
}

<body onload=enable_text(false);>

  <form name=f1 method=post>
    <input type="checkbox" name=others onclick="enable_text(this.checked)">Others
    <input type=text name=other_text>
  </form>

</body>

我面临的问题是，每次我在表单中添加新的复选框和文本框时都需要重复javascript代码，因为复选框的名称已经过硬编码。如何使其具有动态性，以便在添加带有复选框的新文本框后，应使其动态化并在单击复选框时启用它

Answer 1

这是您可以使用JavaScript代码执行的操作

G:\app\myflutter>flutter doctor -v
[√] Flutter (Channel beta, v0.11.3, on Microsoft Windows [Version 10.0.16299.547], locale zh-CN)
    • Flutter version 0.11.3 at C:\dep\flutter
    • Framework revision 72bf075e8d (11 days ago), 2018-11-09 20:36:17 -0800
    • Engine revision 5646e86a6f
    • Dart version 2.1.0 (build 2.1.0-dev.9.3 9c07fb64c4)

[√] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at C:\Users\linla\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: E:\developeSoftware\AS\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
    • All Android licenses accepted.

[√] Android Studio (version 3.2)
    • Android Studio at E:\developeSoftware\AS
    • Flutter plugin version 29.1.1
    • Dart plugin version 181.5540.11
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[√] Connected device (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)

• No issues found!

var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;
   
}else{
  this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}
 
};
for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

这就是处理JQuery代码的方法

  <form name=f1 method=post>
    	  <div class="parentDiv">
    		  <input type="checkbox" class='chkbox' name=others>Others
              <input type=text name=other_text class='txtbox' disabled='disabled'>
    	  </div>

          <div class="parentDiv">
        		  <input type="checkbox" class='chkbox' name=others>Others
                  <input type=text name=other_text class='txtbox' disabled='disabled'>
          </div>
      </form>

$('.chkbox').on('click',function(){
			if($(this).is(':checked')){
			$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
			}
			else{
			$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
			}
});

Answer 2

只要复选框的data-name属性与输入元素的name属性相同，就可以接受任意数量的复选框/输入。

我使用了querySelectorAll('input[class="checker"]')，但是也可以用getElementsByClassName('checker')替换（因为我是通过全班选择的）

我确定仍然可以对其进行优化，但是我这样做是为了显示复选框和输入之间的联系

var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
  checkbox[i].onclick = enable_text;
}

function enable_text() {
  var status = !this.checked;
  var name = this.getAttribute('data-name');
  var input = document.querySelector('[name="' + name + '"]');
  input.disabled = status;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>

Answer 3

尝试一下...

$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
 $(this).closest(".section").find('.txt').prop("disabled", !this.checked);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >

  <form name=f1 method=post>
  <div class="section">
   <input type="checkbox" name=others  class="checkbox">Others1
    <input type=text name=other_text class="txt" >
  </div>
    <div class="section">
   <input type="checkbox" name=others  class="checkbox">Others2
    <input type=text name=other_text class="txt" >
  </div>
   <div class="section">
   <input type="checkbox" name=others  class="checkbox">Others3
    <input type=text name=other_text class="txt" >
  </div>
  </form>

</body>

Answer 4

您可以通过获取复选框更改事件并将下一个输入框添加到复选框中来实现此目标，如下面的代码所示。

$(function() {
  $("input[type=checkbox]").change(function(){
    
    if($(this).is(":checked"))
    {
        $(this).next('input[type=text]').prop('disabled', false);
    
    }
    else
    {
    $(this).next('input[type=text]').prop('disabled', true);
    }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <form name=f1 method=post>
    <input type="checkbox" checked='checked' name=others>Others
    <input type='text' name=other_text>
    <input type="checkbox" checked='checked' name=others>Others
    <input type='text' name=other_text>
  </form>

</body>

单击复选框禁用/启用表单文本框，并将文本框的名称作为参数传递给javascript函数

4 个答案: