jQuery Disabling & Enabling input type image when clicked

Question

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

disabled is a property not an attribute. Use .prop('disabled', true); and .prop('disabled', false); to set the property accordingly. — War10ck
– War10ck, Commented Aug 22, 2016 at 16:17
@Mojtaba Semantically it does. One way is correct and one way is not... — War10ck
– War10ck, Commented Aug 22, 2016 at 16:19
@Mojtaba See this answer: stackoverflow.com/questions/5874652/prop-vs-attr for more details... — War10ck
– War10ck, Commented Aug 22, 2016 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
– Mojtaba, Commented Aug 22, 2016 at 16:47

Dryden Long · Accepted Answer · 2016-08-22 16:16:17Z

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/

answered Aug 22, 2016 at 16:16

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kayden Over a year ago

$("#rating-row2 input").removeAttr("disabled"); this doesn't seem to work

Barmar Over a year ago

Use .prop('disabled', false).

Collectives™ on Stack Overflow

jQuery Disabling & Enabling input type image when clicked

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related