JS if语句似乎不起作用

Question

I have a checkbox and if it is checked, I want text boxes to be editable. If it remains unchecked, then I want the text boxes to be readOnly. Here is my JS:

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

My HTML for the checkbox:

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

The JS seems to make the text box readOnly just fine, but when I make sure the checkbox is checked, the text box remains readOnly. Any suggestions?

Answer 1

You would need to use an event handler to run when the checkbox changes state

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