Javascript can disable/enable buttons but can't disable radio buttons or text areas

I am making a phonegap app and I have a page which requires some user input. If a checkbox (reported) is checked then I want to disable all user input except the next check button.

<div data-role="main" class="ui-content" id="MainBody">
  <ul id="topBtns">
    <li id="reportedLabel">
      <label id="reportedLabel">
        <input type="checkbox" id="reported" class="hidden" onchange="document.getElementById('1a').disabled = this.checked;document.getElementById('1b').disabled = this.checked;document.getElementById('comment1').disabled = this.checked;document.getElementById('photo1').disabled = this.checked;">
        Already reported
      </label>
    </li>
    <li id="back">
      <button id="back" data-icon="arrow-l">
        Check 0
      </button>
    </li>
  </ul>
  <br>
  <h2 class="checkNum">Check #1</h2>
  <p class="check">Some Text</p>
  <label><input type="radio" id="1a" name="1">Answer1</label>
  <label><input type="radio" id="1b" name="1">Answer2</label>
  <br>
  <textarea rows="4" placeholder="Type your comments here" id="comment1"></textarea>
  <br>
  <button id="photo1" onclick="insert_photo()">
    Insert Photo
  </button>
  <button id="btnCont1" onClick="location.href='index.html#Q2'">Continue</button>
</div> <!-- Main -->

It works when I run the code on the snippet in this question but when I run it through the phonegap app or even just run the HTML file only the insert photo button gets disabled but the other 3 elements are ignored. This makes me think that it has something to do with Jquery Mobile but I'm not sure to be completely honest.

Any help is much appreciated

Solution

Although I can't test in your environment, it's probably related to the way you're using this. In order to better examine your problem I tranfered the code on onchange event to a function. The first problem I had was that this wasn't being passed to the function. Then I initially called the function like disableControls(this.checked), and using a parameter to get the value. It worked but made me think that could be your problem. The best would be for you to try to get the checked value using document.getElementById also. Take a look at my example and reproduce in your environment to see if it works. If it don't you can use console.log the elements to debug what's wrong.

function disableControls() {		
    var checked = document.getElementById('reported').checked;
    document.getElementById('1a').disabled = checked;
    document.getElementById('1b').disabled = checked;
    document.getElementById('comment1').disabled = checked;
    document.getElementById('photo1').disabled = checked;	
}

<html >
<meta charset="utf-8">
<body>
<div data-role="main" class="ui-content" id="MainBody">
	<ul id="topBtns">
		<li id="reportedLabel">
			<label id="reportedLabel">
				<input type="checkbox" id="reported" class="hidden" onchange="disableControls();">
				Already reported
			</label>
		</li>
		<li id="back"><button id="back" data-icon="arrow-l">Check 0</button></li>
	</ul>
	<br>
	<h2 class="checkNum">Check #1</h2>
	<p class="check">Some Text</p>
	<label><input type="radio" id="1a" name="1">Answer1</label>
	<label><input type="radio" id="1b" name="1">Answer2</label>
	<br>
	<textarea rows="4" placeholder="Type your comments here" id="comment1"></textarea>
	<br>
	<button id="photo1" onclick="insert_photo()">Insert Photo</button>
	<button id="btnCont1" onClick="location.href='index.html#Q2'">Continue</button>
</div> <!-- Main -->

</body>
</html>