title: jQuery Disabling & Enabling input type image when clicked
body: <pre><code>    &lt;div id="rating-row1"&gt;
          &lt;span class="qn" id="qn1"&gt;Question 1: &lt;br/&gt;&lt;/span&gt;
              &lt;div id="rating-row"&gt;
                  &lt;input id="excellent" type="image" src="excellent.png" name="image" width="120" height="120"&gt;
                  &lt;input id="good" type="image" src="good.png" name="image" width="120" height="120"&gt;
                  &lt;input id="average" type="image" src="fair.png" name="image" width="120" height="120"&gt;
                  &lt;input id="poor" type="image" src="poor.png" name="image" width="120" height="120"&gt;
                  &lt;input id="verypoor" type="image" src="verypoor.png" name="image" width="120" height="120"&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="rating-row2"&gt;
          &lt;span class="qn" id="qn2"&gt;Question 2: &lt;br/&gt;&lt;/span&gt;
              &lt;div id="game-row"&gt;
                  &lt;input id="game1" type="image" src="scrub.png" name="image" width="170" height="120"&gt;
                  &lt;input id="game2" type="image" src="sling.png" name="image" width="250" height="120"&gt;
                  &lt;input id="game3" type="image" src="square.png" name="image" width="180" height="120"&gt;
                  &lt;input id="game4" type="image" src="ward.png" name="image" width="150" height="120"&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="rating-row3"&gt;
          &lt;span class="qn" id="qn3"&gt;Question 3: &lt;br/&gt;&lt;/span&gt;
              &lt;div id="last-row"&gt;
                  &lt;input id="excellent" type="image" src="excellent.png" name="image" width="120" height="120"&gt;
                  &lt;input id="good" type="image" src="good.png" name="image" width="120" height="120"&gt;
                  &lt;input id="average" type="image" src="fair.png" name="image" width="120" height="120"&gt;
                  &lt;input id="poor" type="image" src="poor.png" name="image" width="120" height="120"&gt;
                  &lt;input id="verypoor" type="image" src="verypoor.png" name="image" width="120" height="120"&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I currently have 3 rows of image type input button. I would like to disable "rating-row2" &amp; "rating-row3" button upon page load, leaving only "rating-row1" enabled to click.</p>
  
  <p>However, after <strong>any</strong> of the input button is clicked on in "rating-row1", I would like the next row ("rating-row2") to be enabled while ("rating-row1" &amp; "rating-row3") to be disabled.</p>
  
  <p>Likewise, after <strong>any</strong> button is clicked in "rating-row2", the buttons is "rating-row3" will be enabled while "row 1 and 2" is disabled.</p>
  
  <p>And this will keep repeating when "rating-row3" is pressed, it will return to the start again.</p>
  
  <pre><code>    $("#rating-row2").attr('disabled','disabled').css('opacity',0.5);
      $("#rating-row3").attr('disabled','disabled').css('opacity',0.5);
  
  $('#rating-row1').click(function(){
      $("#rating-row1").attr('disabled','disabled').css('opacity',0.5);
      $("#rating-row3").attr('disabled','disabled').css('opacity',0.5);
      $("#rating-row2").removeAttr("disabled");
  }
  </code></pre>
  
  <p>Greatly appreciate any help or advice given! Have only tried with the following above, but of course it does not work.</p>