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行图像类型输入按钮。我想禁用＆＃34; rating-row2＆＃34; ＆安培; ＆＃34;评级-ROW3＆＃34;页面加载时按钮，只留下＆＃34; rating-row1＆＃34;已启用点击。

然而，在任何输入按钮被点击＆＃34; rating-row1＆＃34;后，我想要下一行（＆＃34; rating-row2＆＃34; ）启用时（＆＃34; rating-row1＆＃34;＆amp;＆＃34; rating-row3＆＃34;）将被禁用。

同样，在任意按钮点击＆＃34; rating-row2＆＃34;后，按钮为＆＃34; rating-row3＆＃34;将在＆＃34;第1行和第2行＆＃34;被禁用。

当＆＃34; rating-row3＆＃34;按下后，它将重新开始。

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

它应该可以正常工作。

这是一个小提琴：https://jsfiddle.net/1ycfsx74/

jQuery禁用＆amp;单击时启用输入类型图像

1 个答案: