How to disable an checkbox once a certain radio button is clicked.

Asked By: Anonymous

Want to disable the checkbox “animation” once the “3D” radio button is selected. and too un-disable once the “2D” is selected.

html code

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

Im new at ember.js, I have the java code in the app.js. Would it be better if it was placed in another js file?

javascrirpt

function displayType() {

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

Any suggestion would be really helpful. Thanks.

Solution

Answered By: Anonymous

The first thing I noticed is that you have forgotten to make your onclick calls into function calls:

onclick="displayType"

Needs to change to

onclick="displayType()"

Next, when I put your code into a jsfiddle, it was not finding the function because it was not in the global scope. When I changed the function definition from:

function displayType() {

to:

window.displayType = function () {

it solved the problem. This may be different depending on where you put your code.