라디오 버튼과 텍스트 상자

두 개의 텍스트 상자가 but1이 때 내가해야 할 일은 BOX2

이 입니다 BOX1 but1이

두 개의 라디오 버튼을하려고 한 상자 1은 편집 가능해야하며 상자 2는 읽기 전용이어야합니다. but2가 선택되면 box2는 편집 가능해야하며 box1은 읽기 전용이어야합니다.

페이지로드시 두 텍스트 상자를 모두 읽어야합니다. 그 양식에 내가 서버에 보낼 수있는 텍스트 상자의 값을 가질 것이다 제출 있도록

내 코드는 내가 텍스트 상자를 해제하지만 읽기 전용을 만들고 싶어하지 않는

<style type="text/css"> 
    .field-name { 
     color:  #444; 
     font-family: verdana; 
     font-size: 0.85em; 
     line-height: 2em; 
    } 
</style> 

<script type="text/javascript"> 


    function makeChoice() { 
     if (document.getElementById('but1').checked = true) { 
      document.getElementById('box2').readonly = true; 
     } 
     else if (document.getElementById('but2').checked = true) { 
      document.getElementById("box1").readonly = true; 
     } 

    } 


</script> 


<html> 

<body> 
<table> 
    <input type="radio" id="but1" name="vals" onclick="makeChoice()"> 
    <input type="radio" id="but2" name="vals" onclick="makeChoice()"> 
    <input type="text" id="box1" value="abcde"> 
    <input type="text" id="box2" value="pqrst"> 
</table> 
</body> 

<html>

다음과 같다.

나는 여기서 무슨 실수를 저지르고있다. 어떤 도움이라도 대단히 감사하겠습니다. 감사합니다

출처

2012-02-03 user747291

이 같은 "읽기 전용"attibute 설정해야합니다

document.getElementById('box2').setAttribute('readonly','readonly')

및 문, 당신은 변수를 설정하는 경우가 있는지 여부를 테스트하지에서 thisL

document.getElementById('box2').setAttribute('readonly','')

출처

2012-02-03 19:41:58

: 난 당신의 코드를 사용하고 그것은 여전히 작동하지 않습니다. – user747291

처럼 취소 그것은 한 상태 또는 다른 상태에 있습니다. 당신은이를 사용할 필요가 :

이

if (document.getElementById('but1').checked == true) {

참고 이 등호 기호가 있음. 이 두 가지가 같은지 확인합니다. 기본적으로 세트는이고, 두 개의 숫자는 이며,입니다. 물론 IF 문을 두 개의 등호로 변경하십시오.

또한 onload는 모두 읽기 전용이어야한다고 말합니다. 이렇게하려면 텍스트 상자에

readonly="readonly"

을 추가하십시오. 또한 라디오 버튼을 클릭하면 해당 텍스트 상자에서 읽기 전용을 해제해야합니다. 그래서, 모두

: 기본적으로

<style type="text/css"> 
    .field-name { 
     color:  #444; 
     font-family: verdana; 
     font-size: 0.85em; 
     line-height: 2em; 
    } 
</style> 

<script type="text/javascript"> 
    function makeChoice() { 
     if (document.getElementById('but1').checked) { 
      document.getElementById('box2').setAttribute('readOnly','readonly'); 
      document.getElementById('box1').removeAttribute('readOnly',''); 
     } else if (document.getElementById('but2').checked) { 
      document.getElementById('box1').setAttribute('readOnly','readonly'); 
      document.getElementById('box2').removeAttribute('readOnly',''); 
     } 

    } 
</script> 


<html> 

<body> 
<table> 
    <input type="radio" id="but1" name="vals" onclick="makeChoice()"> 
    <input type="radio" id="but2" name="vals" onclick="makeChoice()"> 
    <input type="text" id="box1" value="abcde" readonly="readonly"> 
    <input type="text" id="box2" value="pqrst" readonly="readonly"> 
</table> 
</body> 

<html>

출처

2012-02-03 19:45:15

@ David : 나는 당신의 기능을 시험해도 작동하지 않는다. – user747291

답장을 보내 주셔서 감사합니다. 나는 아직도 무엇이 진행되고 있는지 모릅니다. – user747291

다른 답변에서 더 좋은 부분을 몇 번 추가하기 위해 여러 번 편집했습니다. 모두 작동합니다. 최신 버전을 사용해 보셨습니까? 무슨 일이 벌어 지는지에 대해서는 다음을 확인하십시오. http://www.developer.com/lang/other/article.php/604441/Double-vs-Single-Equal-Sign.htm 아마 도움이 될 것입니다. –

, 당신은 = 대신 조건문에 ==의를 사용하고 있습니다. 또한 상자 중 하나에서 항상 readonly를 false로 설정해야합니다. 그렇지 않으면 두 번의 클릭 후 두 개의 읽기 전용 상자가 생깁니다. 이것을 시도하십시오 :

EDIT 속성 이름은 readOnly이 아니라 readonly입니다. setAttribute을 사용하는 대신 특성을 직접 조작하기 위해 코드를 편집했습니다. jsfiddle의 작업 버전을 참조하십시오 :

function makeChoice() { 
    document.getElementById('box1').readOnly = document.getElementById('but2').checked 
    document.getElementById('box2').readOnly = document.getElementById('but1').checked 
}

출처

2012-02-03 19:46:33 bfavaretto

나는 너의이 기능을 사용했지만 여전히 운이 없다! – user747291

희망,이 코드는 도움이 될 것입니다.

http://jsfiddle.net/ylokesh/AAAVp/1/

출처

2012-02-03 19:50:38

Im new to jquery 내 코드에 jquery를 어떻게 포함합니까? 제발 조언을 – user747291

jquery 파일을 포함하는 몇 가지 방법이 있습니다. 하나는 Google Jquery API 경로를 연결하는 것입니다. 두 번째 방법은 www.jquery.com에서 최신 jquery.js를 다운로드하여 로컬 폴더에 저장하는 것입니다. 다음은 Google jquery API 링크입니다. 당신은 단지 스크립트 태그 –

당신은 실수의 몇 가지를 만들고있어 :

여기 내 시도이다. 우선 CSS와 자바 스크립트 코드는 태그에 포함되어야합니다.이 코드는 <html> 바로 뒤에, <body> 앞에 있어야합니다. 두 번째로 if 문이 올바르지 않습니다. 부호 하나만 변수에 값을 지정하면 변수를 값 (예 : if (something == value))을 검사하기 위해 두 개 (이 경우 세 개) 사용해야합니다. 마지막으로 readonly 속성의 값을 수정하려면 setAttribute() 및 removeAttribute() 함수를 사용하는 것이 좋습니다.

전체 코드는 다음과 같습니다 엔트로피 @

<html> 
<head> 
<style type="text/css"> 
    .field-name { 
     color:  #444; 
     font-family: verdana; 
     font-size: 0.85em; 
     line-height: 2em; 
    } 
</style> 
<script type="text/javascript"> 
    function makeChoice() { 
     if (document.getElementById('but1').checked === true) { 
      document.getElementById('box2').setAttribute('readonly','readonly'); 
      document.getElementById('box1').removeAttribute('readonly',''); 
     } 
     else if (document.getElementById('but2').checked === true) { 
      document.getElementById('box1').setAttribute('readonly','readonly'); 
      document.getElementById('box2').removeAttribute('readonly',''); 
     } 

    } 
</script> 
</head> 
<body> 
<table> 
    <input type="radio" id="but1" name="vals" onclick="makeChoice()"> 
    <input type="radio" id="but2" name="vals" onclick="makeChoice()"> 
    <input type="text" id="box1" value="abcde"> 
    <input type="text" id="box2" value="pqrst"> 
</table> 
</body> 

<html>

출처

2012-02-03 19:51:14 entropid

답장을 보내 주셔서 감사하지만 그것은 나던 않습니다 메신저 ie7을 사용하여 작동하는 것 같다 브라우저 문제입니까? – user747291

방금 사파리와 파이어 폭스에서 해봤 다. http://jsfiddle.net/5uG63/. 불행히도 나는 현재 IE를 사용할 수 없습니다. 정확히 작동하지 않는 것은 무엇입니까? – entropid

라디오 버튼 oncheck, 텍스트 필드 중 하나가 읽기 전용이되어야합니다. – user747291

라디오 버튼과 텍스트 상자

답변

관련 문제