동적으로 생성 된 텍스트 상자 사용 안 함

Question

텍스트 상자와 라디오 단추를 동적으로 만들고 필드를 데이터베이스에서 가져옵니다. 내 작업을 위해, 나는 자바 스크립트를 사용하여 라디오 버튼을 틱하여 일부 텍스트 상자를 비활성화해야합니다. 그러나 라디오 버튼은 항상 표시됩니다. 예를 들어, 첫 번째 라디오 버튼을 클릭하면 라디오 버튼이 아닌 두 번째 및 세 번째 텍스트 상자가 비활성화됩니다.

어떻게 자바 스크립트를 사용하여 이것을 얻을 수 있습니까?

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

자바 스크립트 : 더 철저한 설명은 here을 찾을 수 있습니다

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