ラジオボタンとテキストボックス

私はjavascriptの学習者だとbut1があるときに私がする必要がどのようなラジオボタンとテキストボックス

2つのテキストボックスのBOX1のBOX2

があるbut1 but2この

2つのラジオボタンをやろうとしてきましたbox1は編集可能であり、box2は読み取り専用である必要があります。 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

のようにそれをクリアそれは1つの状態または別の状態にある。等号があること

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

注：あなたはこれを使用する必要があります。これは、2つが同じかどうかをチェックします。基本的に、1つはセットに等しく、2つはと等しく、と等しくなります。もちろん、両方のIF文を2つの等号に変更してください。

また、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おそらく助けになるでしょう –

基本的に、あなたはあなたの条件文の=の代わり==を使用しています。また、ボックスの1つで常にreadonlyをfalseに設定する必要があります。そうしないと、2回のクリック後に2つの読み取り専用ボックスが表示されます。試してみてください：

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ファイルを含める方法がいくつかあります。 1つはGoogle Jquery APIのパスをリンクすることです。 2番目の方法は、www.jquery.comから最新のjquery.jsをダウンロードしてローカルフォルダに保存することです。ここにgoogle jquery APIのリンクがあります。返信用に感謝しますが、スクリプトタグ –

あなたがミスのカップルを作っています。最初に、あなたのCSSとJavaScriptコードは<head>タグに含める必要があります。<html>の直後、<body>の前に配置する必要があります。 2番目のifステートメントが正しくありません。記号で変数に値を代入する場合は、2つ（この場合は3つ）の値を使用して、変数を値（if (something == value)）でチェックする必要があります。最後に、関数setAttribute()とremoveAttribute()を使用して、readonly属性の値を変更する方がよいでしょう。

完全なコードは次のようになります。エントロピー@

<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

私はSafariとFirefoxで試したところ、http://jsfiddle.net/5uG63/で動作します。不運にも私は現時点でIEを利用できません。何が正確に動作しないのですか？ – entropid

ラジオボタンのオンチェックでは、テキストフィールドの1つが読み取り専用になるはずです。これは問題ありません... – user747291

ラジオボタンとテキストボックス

答えて

関連する問題