2013-10-31 1 views
0

The textfields should be disabled unless radio buttons are clicked 나는 다음과 같은 텍스트 필드를 가지고 라디오 버튼 그렇지 않으면 사용하지 않아야 클릭 할 때 나는 그것을 사용하려면 :라디오 버튼 기반 HTML을 사용하지 않도록 설정하는 방법은 무엇입니까?

function Chosen4() if (document.getElementById('rbothers4').checked == true) { 
     message += " (Others)" 
    document.getElementById("cbotherstext4").setAttribute("disabled", true); 
} 

그리고 HTML 코드가 여기

<input type="radio" name="Promised" id="rbothers4" onclick="displayResult(this.value)" value="Yes6" >c. Others 
     (Please Specify) 
<input id="cbotherstext4" type="text" />&nbsp;</td> 
<input type="button" id="Button4" onclick="Chosen4()" value="Date Promised"/> 

답변

4
  1. 당신은없는 것입니다 귀하의 예제에서 확인란을 선택하십시오. 어쨌든 그것을 할 것을 선택하는 경우
  2. 처리 인라인 이벤트를 사용하지 마십시오,

자바 스크립트 솔루션 함수에 개체를 전달

Live Demo

window.onload=function() { 
    var promised = document.getElementsByName("Promised4"); 
    for (var i=0;i<promised.length;i++) { 
    promised[i].onclick=function() { 
     var rads = this.form[this.name]; 
     for (var i=0;i<rads.length;i++) { 
     var textField = this.form[rads[i].value.toLowerCase()+"Specify"]; 
     if (textField) textField.disabled = !rads[i].checked; 
     }  
    }  
    } 
}  

jQuery를 솔루션

사용 16,

Live Demo

$(function() { 
    var $promised = $("input[name='Promised4']"); 
    $promised.each(function() { 
    $(this).on("click",function() { 
     $promised.each(function() { 
     var textField = $(this).nextAll("input").first(); 
     if (textField) textField.prop("disabled",!this.checked); 
     });  
    });  
    }); 
});  

<form> 
    <input type="radio" name="Promised4" id="rbYes" value="Yes" ><label for="rbYes">a. Yes</label><br/> 
    <input type="radio" name="Promised4" id="rbNo" value="No" ><label for="rbNo">b. No (please specify)</label> 
    <input type="text" name="noSpecify" id="noSpecify" value="" disabled="disabled" /><br/> 
    <input type="radio" name="Promised4" id="rbOther" value="Other" ><label for="rbOther">c. Other (please specify)</label> 
    <input type="text" name="otherSpecify" id="otherSpecify" value="" disabled="disabled"/><br/> 
</form> 
관련 문제