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

【问题标题】：jQuery Disabling & Enabling input type image when clicked单击时jQuery禁用和启用输入类型图像
【发布时间】：2016-08-23 00:16:26
【问题描述】：

    <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”中点击any按钮后，“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");
}

非常感谢您提供的任何帮助或建议！只用上面的方法试过了，当然不行。

【问题讨论】：

disabled 是属性而不是属性。使用.prop('disabled', true); 和.prop('disabled', false); 相应地设置属性。
@War10ck，没关系
@Mojtaba 从语义上讲确实如此。一种方法是正确的，一种方法是错误的......
@Mojtaba 查看此答案：stackoverflow.com/questions/5874652/prop-vs-attr 了解更多详情...
@War10ck，我知道 prop 与 attr 不同。我的意思是这个问题并不重要，并且 attr 可以操纵残疾人。顺便说一句，禁用是一个属性。对不起，如果我解释得不够充分

标签： jquery html css forms

【解决方案1】：

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

$("#rating-row2 input")

它应该可以正常工作。

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

【讨论】：

$("#rating-row2 input").removeAttr("disabled");这似乎不起作用
使用.prop('disabled', false)。