[英]Disabling dynamically created Text boxes
I'm creating text boxes and radio buttons dynamically and fields are fetched from database. 我正在动态创建文本框和单选按钮,并且从数据库中获取字段。 For my task, I need to disable some text boxes by ticking of radio buttons using javascript. 对于我的任务,我需要通过使用javascript选中单选按钮来禁用某些文本框。 However radio buttons are visible always. 但是,单选按钮始终可见。 For an example, If i click first radio button, it should disable 2nd and 3rd of text boxes , not radio button. 例如,如果我单击第一个单选按钮,则应禁用第二个和第三个文本框,而不是单选按钮。
How could i achieve this using javascript? 我如何使用javascript做到这一点?
HTML: HTML:
<input type='radio' name='r1' value="NE" />
<input type='radio' name='r1' value="NW" />
<input type='radio' name='r1' value="SE" />
<input type='textbox' id="txt1" name='txt1' value="NE"/>
<input type='textbox' id="txt2" name='txt2' value="NW"/>
<input type='textbox' id="txt3" name='txt3' value="SE"/>
JavaScript: JavaScript:
// First assign onclick handler to your radio buttons
// Note - this is just a demo. You should encapsulate
// this loop in a page onload initialization method.
var radios = document.forms[0].elements["r1"];
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = DisableTextBoxes;
}
// Disable textboxes based on respective radio click
function DisableTextBoxes(){
var textboxes = [
document.getElementById("txt1"),
document.getElementById("txt2"),
document.getElementById("txt3")]
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked) {
textboxes[i].disabled = false;
} else {
textboxes[i].disabled = true;
}
}
}
A more thorough explanation can be found here . 在这里可以找到更详尽的解释。
If you're using jQuery, you can use the :text
or input[type=text]
selectors to choose text boxes for manipulation. 如果您使用的是jQuery,则可以使用:text
或input[type=text]
选择器来选择要操作的文本框。
For example, to disable the first text box that immediately follows a checkbox: 例如,要禁用紧接复选框的第一个文本框:
<input type="checkbox" name="check1" id="check1" value="Yes">
<input type="text" id="txt1" name="txt1">
<script type="javascript">
$("#check1").change(function(){
if($(this).is(':checked'))
$(this).next(":text").attr('disabled','true');
else
$(this).next(":text").removeAttr('disabled');
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.