1
    <div id="rating-row1">
        <span class="qn" id="qn1">Question 1: <br/></span>
            <div id="rating-row">
                <input id="excellent" type="image" src="excellent.png" name="image" width="120" height="120">
                <input id="good" type="image" src="good.png" name="image" width="120" height="120">
                <input id="average" type="image" src="fair.png" name="image" width="120" height="120">
                <input id="poor" type="image" src="poor.png" name="image" width="120" height="120">
                <input id="verypoor" type="image" src="verypoor.png" name="image" width="120" height="120">
            </div>
    </div>

    <div id="rating-row2">
        <span class="qn" id="qn2">Question 2: <br/></span>
            <div id="game-row">
                <input id="game1" type="image" src="scrub.png" name="image" width="170" height="120">
                <input id="game2" type="image" src="sling.png" name="image" width="250" height="120">
                <input id="game3" type="image" src="square.png" name="image" width="180" height="120">
                <input id="game4" type="image" src="ward.png" name="image" width="150" height="120">
            </div>
    </div>

    <div id="rating-row3">
        <span class="qn" id="qn3">Question 3: <br/></span>
            <div id="last-row">
                <input id="excellent" type="image" src="excellent.png" name="image" width="120" height="120">
                <input id="good" type="image" src="good.png" name="image" width="120" height="120">
                <input id="average" type="image" src="fair.png" name="image" width="120" height="120">
                <input id="poor" type="image" src="poor.png" name="image" width="120" height="120">
                <input id="verypoor" type="image" src="verypoor.png" name="image" width="120" height="120">
            </div>
    </div>

I currently have 3 rows of image type input button. I would like to disable "rating-row2" & "rating-row3" button upon page load, leaving only "rating-row1" enabled to click.

However, after any of the input button is clicked on in "rating-row1", I would like the next row ("rating-row2") to be enabled while ("rating-row1" & "rating-row3") to be disabled.

Likewise, after any button is clicked in "rating-row2", the buttons is "rating-row3" will be enabled while "row 1 and 2" is disabled.

And this will keep repeating when "rating-row3" is pressed, it will return to the start again.

    $("#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");
}

Greatly appreciate any help or advice given! Have only tried with the following above, but of course it does not work.

Kayden
  • 133
  • 3
  • 16
  • 1
    `disabled` is a property not an attribute. Use `.prop('disabled', true);` and `.prop('disabled', false);` to set the property accordingly. – War10ck Aug 22 '16 at 16:17
  • @War10ck, doesn't matter – Mojtaba Aug 22 '16 at 16:18
  • @Mojtaba Semantically it does. One way is correct and one way is not... – War10ck Aug 22 '16 at 16:19
  • @Mojtaba See this answer: http://stackoverflow.com/questions/5874652/prop-vs-attr for more details... – War10ck Aug 22 '16 at 16:23
  • @War10ck, I know prop is different than attr. I meant it doesn't matter for this issue and attr can manipulate the disabled. By the way, disabled is an attribute. Sorry if I didn't explain enough – Mojtaba Aug 22 '16 at 16:47

1 Answers1

1

You are trying to disable the container div in your javascript, but you need to disable the input elements themselves. Change your targets to 

$("#rating-row2 input")

and it should work just fine.

Here is a fiddle: https://jsfiddle.net/1ycfsx74/

Dryden Long
  • 10,072
  • 2
  • 35
  • 47