單擊復選框禁用/啟用表單文本框，並將文本框的名稱作為參數傳遞給javascript函數
[英]Disabling/Enabling of form text boxes on click of checkbox and passing name of the text box as a parameter to javascript function
問題描述
這是一個示例代碼，在其中單擊復選框時我將禁用或啟用文本框。
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代碼，因為復選框的名稱已經過硬編碼。 如何使其具有動態性，以便在添加帶有復選框的新文本框后，應使其動態化並在單擊復選框時啟用它
4 個解決方案
解決方案1
1 2018-11-21 08:27:32
這就是使用javascript代碼的方法
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); }
<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>
這就是使用JQuery代碼的方法
$('.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) } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <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> <div class="parentDiv"> <input type="checkbox" class='chkbox' name=others>Others <input type=text name=other_text class='txtbox' disabled='disabled'> </div> </form>
解決方案2
0 2018-11-21 08:14:04
只要復選框的data-name屬性與input元素的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>
解決方案3
0 2018-11-21 08:22:18
嘗試這個...
$(".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>
解決方案4
0 2018-11-21 08:24:41
您可以通過獲取復選框更改事件並將該復選框的下一個輸入框獲取為做到這一點，如下面的代碼所示。
$(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，用於將帳單文本框復制到運輸文本框
[英]Javascript for checkbox to copy billing text boxes over to shipping text boxes
jQuery / javascript在復選框單擊或相鄰文本單擊時執行功能
[英]jquery/javascript perform function on checkbox click or adjacent text click
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.