禁用動態創建的文本框

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>