单击时 jQuery 禁用和启用输入类型图像

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>

我目前有 3 行图像类型输入按钮。我想在页面加载时禁用“rating-row2”和“rating-row3”按钮，只保留“rating-row1”以供点击。

但是，在“rating-row1”中单击任何输入按钮后，我希望启用下一行(“rating-row2”)，而(“rating-row1” "& "rating-row3") 被禁用。

同样，在“rating-row2”中点击任何按钮后，按钮“rating-row3”将被启用，而“row 1 and 2”被禁用。

并且在按下“rating-row3”时会一直重复，会再次回到开始。

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

非常感谢提供的任何帮助或建议!仅尝试了上面的以下内容，但当然行不通。

Answer 1

您正在尝试禁用 javascript 中的容器 div，但您需要禁用输入元素本身。将您的目标更改为

$("#rating-row2 input")

它应该工作得很好。

这是一个 fiddle :https://jsfiddle.net/1ycfsx74/