CODEWITHSUNDEEP
jqueryhtmlcssforms
Kayden
Kayden

Reputation: 133

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.

Upvotes: 1

Views: 1244

Answers (1)

Dryden Long
Dryden Long

Reputation: 10180

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/

Upvotes: 1

Related Questions