Javascript 可以 disable/enable 按钮但不能禁用单选按钮或文本区域

Question

我正在制作一个 phonegap 应用程序，我有一个页面需要一些用户输入。如果选中了一个复选框（已报告），那么我想禁用除下一个选中按钮之外的所有用户输入。

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

当我运行这个问题中的代码片段时，它起作用了，但是当我运行它通过 phonegap 应用程序甚至只是运行 HTML 文件时只有插入照片按钮被禁用，但其他 3 个元素被忽略。这让我觉得它与 Jquery 移动设备有关，但我不确定是否完全诚实。

非常感谢任何帮助

Answer 1

虽然我无法在您的环境中进行测试，但这可能与您的使用方式有关this。为了更好地检查您的问题，我将 onchange 事件的代码转移到了一个函数中。我遇到的第一个问题是 this 没有被传递给函数。然后我最初调用函数 disableControls(this.checked)，并使用参数来获取值。它有效，但让我觉得这可能是你的问题。最好的方法是您也尝试使用 document.getElementById 获取选中的值。查看我的示例并在您的环境中重现以查看它是否有效。如果没有，您可以使用 console.log 元素来调试错误。

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>

Javascript 可以 disable/enable 按钮但不能禁用单选按钮或文本区域

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

html

javascript

jquery

phonegap