禁用动态创建的文本框

Question

我正在动态创建文本框和单选按钮，并且从数据库中获取字段。 对于我的任务，我需要通过使用javascript选中单选按钮来禁用某些文本框。 但是，单选按钮始终可见。 例如，如果我单击第一个单选按钮，则应禁用第二个和第三个文本框，而不是单选按钮。

我如何使用javascript做到这一点？

Answer 1

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：

// 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;
     }
  }
}

在这里可以找到更详尽的解释。

Answer 2

如果您使用的是jQuery，则可以使用:text或input[type=text]选择器来选择要操作的文本框。

例如，要禁用紧接复选框的第一个文本框：

<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>