jQuery禁用和啓用輸入類型圖像點擊時

<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」啓用點擊。jQuery禁用和啓用輸入類型圖像點擊時

然而，後輸入按鈕的任何被點擊了「評級，ROW1」，我想下一行（「評級，2行」）將被啓用，而（「評級，ROW1」 &「評級-row3「）被禁用。

同樣，在任意按鈕被點擊在「rating-row2」中，按鈕是「rating-row3」將被啓用，而「行1和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"); 
}

非常感謝您給予的任何幫助或建議！只嘗試了以上內容，但當然不起作用。

來源

2016-08-22 Kayden

'disabled'是屬性不是屬性。使用'.prop（'disabled'，true）;'和'.prop（'disabled'，false）;'相應地設置屬性。 – War10ck

@ War10ck，無所謂 – Mojtaba

@Mojtaba語義上它確實如此。一種方法是正確的，一種方法是... – War10ck

您正試圖在JavaScript中禁用容器div，但您需要禁用輸入元素本身。改變你的目標爲

$("#rating-row2 input")

它應該工作得很好。

這裏是一個小提琴：https://jsfiddle.net/1ycfsx74/

來源

2016-08-22 16:16:17

$（「＃rating-row2 input」）。removeAttr（「disabled」）;這似乎不起作用 – Kayden

使用'.prop（'disabled'，false）'。 – Barmar

@Barmar謝謝你，它現在的作品！ – Kayden

jQuery禁用和啓用輸入類型圖像點擊時

回答

相關問題