单击某个单选按钮后如何禁用复选框。答案

【问题标题】：How to disable an checkbox once a certain radio button is clicked.单击某个单选按钮后如何禁用复选框。
【发布时间】：2013-10-08 05:03:41
【问题描述】：

希望在选择“3D”单选按钮后禁用复选框“动画”。并且一旦选择“2D”就无法禁用。

html代码

  <script type="text/x-handlebars" id="createProject">
    <div class="projectForm">
      <table cellpadding="10">
        <tr>
          <td> Project Name </td>
          <td> <input type="text" name="projectName" /> </td>
        </tr>
        <tr>
          <td> Project Description </td>
          <td> <textarea name="projectDesc" > </textarea> </td>
        </tr>
        <tr>
          <td> Pipleline Type </td>
          <td> 
            <input type="radio" name="pipelineType" value="2d" id="2d" checked="checked" onclick="displayType"> 2D Pipleline <br>
            <input type="radio" name="pipelineType" value="3d" id="3d" onclick="displayType"> 3D Pipleline </td>
        </tr>
        <tr>
          <td> Project Roles </td>
          <td> <input type="checkbox" name="projectRoles" id="animation"value="Animation Clean Up"> Animation Clean Up  
            <input type="checkbox" name="projectRoles" value="Background Painting"> Background Painting 
            <input type="checkbox" name="projectRoles" value="Casting & Recording"> Casting & Recording
            <input type="checkbox" name="projectRoles" value="Color Styling"> Color Styling
          </td>
        </tr>
      </table>
    </div>

  </script>

我是 ember.js 的新手，我在 app.js 中有 java 代码。如果放在另一个js文件中会更好吗？

java脚本

function displayType() {

    if(document.getElementById('2d').checked) {
        document.getElementById('animation').disabled = false;
    }
    else {
        document.getElementById('animation').disabled=true;
    }
}

任何建议都会非常有帮助。谢谢。

【问题讨论】：

想要这样的东西 -> jsfiddle.net/6x9NZ/95

标签： javascript html ember.js forms

【解决方案1】：

我注意到的第一件事是您忘记将 onclick 调用转换为函数调用：

onclick="displayType"

需要改成

onclick="displayType()"

接下来，当我将您的代码放入jsfiddle 时，它没有找到该函数，因为它不在全局范围内。当我从以下位置更改函数定义时：

function displayType() {

到：

window.displayType = function () {

它解决了这个问题。这可能会有所不同，具体取决于您放置代码的位置。

【讨论】：

【解决方案2】：

尝试以下禁用它：

document.getElementById('animation').removeAttribute('disabled');

【讨论】：

【解决方案3】：

试试这个解决方案，

删除<script type="text/x-handlebars" id="createProject"> 及其结束标记。
将前两个单选按钮中的代码从 onclick="displayType" 更改为 onclick="displayType()"。

【讨论】：

【解决方案4】：

简而言之，传递一个变量来确定单击哪个单选按钮

function displayType(def) {
  var checked = def === '3d';

  document.getElementById('animation').disabled = checked; 
}

HTML，将一个变量传递给 javascript 函数，指示它是 3d 还是 2d 被点击

<input type="radio" name="pipelineType" value="2d" id="2d" checked="checked" onclick="displayType('2d')"> 2D Pipleline <br>
<input type="radio" name="pipelineType" value="3d" id="3d" onclick="displayType('3d')"> 3D Pipleline </td>

【讨论】：