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

时间:2013-10-08 05:03:41

标签: javascript html ember.js html-form

选择“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文件中会更好吗?

javascrirpt

function displayType() {

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

任何建议都会非常有用。感谢。

4 个答案:

答案 0 :(得分:3)

我注意到的第一件事是你忘了把你的onclick调用变成函数调用:

onclick="displayType"

需要改为

onclick="displayType()"

接下来,当我将您的代码放入jsfiddle时,它找不到该函数,因为它不在全局范围内。当我从:

更改函数定义时
function displayType() {

为:

window.displayType = function () {
它解决了这个问题。根据您放置代码的位置,这可能会有所不同。

答案 1 :(得分:0)

请尝试以下操作将其停用:

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

答案 2 :(得分:0)

速记,传递变量以确定单击哪个单选按钮

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>

答案 3 :(得分:0)

试试这个解决方案,

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