2016-10-04 17 views
0

私はチェックボックスを持っています。これがチェックされていれば、テキストボックスを編集可能にします。チェックされていない場合は、テキストボックスをreadOnlyにします。ここに私のJSです:JS if文が機能しないようです。

if (document.getElementById('itemize').checked==false) { 
    document.getElementById('budget_1').readOnly = true; 
} else { 
    document.getElementById('budget_1').readOnly = false; 
    } 

チェックボックスのための私のHTML:

<input type="checkbox" id="itemize" style="width: 20px; height: 20px;" /> 

JSは、テキストボックス読み取り専用をうまく作るようですが、私はチェックボックスがチェックされていることを確認したときに、テキストボックスreadOnlyのままです。助言がありますか?

+2

状態に変化したときに実行するイベントハンドラを使用する必要があります。4. – Santi

+2

このJSFiddleを考えてみます。https:// jsfiddle.net/nwny4tdp/ - これはあなたの正確なコードであり、正常に動作します。あなたが提供したスニペットに含まれていないように、あなたの特定の問題を絞り込むのに役立ついくつかのコンテキストを提供できますか? – Santi

+1

あなたのコードはいつ実行されますか?ページを読み込んだときに1回だけ実行されると、チェックボックスをオンまたはオフにすると、何も変わらないことは明らかです。あなたは物事を更新するためにイベントリスナー(おそらく "change"イベントに)を追加する必要があります。 – jcaron

答えて

3

あなたがチェックボックスを使って、ライン上で間違った `budget`を綴った

var 
 
     budget_1 = document.getElementById('budget_1'), 
 
     itemize = document.getElementById('itemize'); 
 
     
 
    itemize.addEventListener("change", readonly); 
 

 
    function readonly(){ 
 
     if (itemize.checked==false) { 
 
      budget_1.readOnly = true; 
 
     } else { 
 
      budget_1.readOnly = false; 
 
     } 
 
    }
<input type="checkbox" id="itemize"/> 
 
<input type="text" id="budget_1" readonly/>

+0

こんにちはAndrew、あなたのコードがうまくいきました! addEventListenerを使用すると、基本的に関数を書く(つまりmyFunction)、より簡単で洗練されたバージョンのonEventスクリプト(つまり、)を使ってHTMLで呼び出すことができます。 – Dave

+0

こんにちは、私はそれを簡単に/難しいとは言いませんが、私はずっとhtml/javascriptを別々のファイルに保管したいと思っています。そのはるかにクリーンでプロフェッショナルです。私の態度は、私はインラインスタイルを使用しないので、なぜインラインjsを使用するのですか?それは基本的に同じ事を達成しますが、あなたの説明のためにありがとう – andrew

+0

ありがとう。私は上記のあなたの方法を好む。私はインラインonChangeを使ってきました、そして、実際にはずっと混乱しています。再度、感謝します。 – Dave

関連する問題