user2728875 user2728875 - 3 months ago 8
CSS Question

jQuery Disabling & Enabling input type image when clicked

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

Answer

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/

Comments