Javascript - 如何禁用點擊這些星星的顏色變化？

我顯示星級用星評級（值1〜5），按照價值的物品從DBJavascript - 如何禁用點擊這些星星的顏色變化？

HTML代碼

<div class="padding-10-history"> 
      <div class="rate animated rubberBand" > 
      <input type="radio" id="starRating5" name="rate" value="5"> 
      <label for="star5" title="text"></label> 
      <input type="radio" id="starRating4" name="rate" value="4"> 
      <label for="star4" title="text"></label> 
      <input type="radio" id="starRating3" name="rate" value="3"> 
      <label for="star3" title="text"></label> 
      <input type="radio" id="starRating2" name="rate" value="2"> 
      <label for="star2" title="text"></label> 
      <input type="radio" id="starRating1" name="rate" value="1"> 
      <label for="star1" title="text"></label> 
      </div>

CSS代碼

.rate { 
height: 57px; 
padding: 0px; 
margin-bottom: 32px; 
width: 170px; 
margin: 0px auto; 

} 
.rate label{ 
position: relative; 
z-index: 1; 
margin: 0px 2px; 
} 
.rate label:before{ 
position: absolute; 
left: -1px; 
top: -4px; 
content: "\2605"; 
color: #e6b507; 
font-size: 36px; 
} 
.rate:not(:checked) > input { 
position:absolute; 
top:-9999px; 
} 
.rate:not(:checked) > label { 
float:right; 
width:1em; 
overflow:hidden; 
white-space:nowrap; 
cursor:pointer; 
font-size:30px; 
color:#fff; 
} 

.rate:not(:checked) > label:after { 
content: "\2605"; 
position: relative; 
z-index: 2; 
} 

.rate > input:checked ~ label { 
color: #ffc700;  
} 



.rate > input:checked + label:hover, 
.rate > input:checked + label:hover ~ label, 
.rate > input:checked ~ label:hover, 
.rate > input:checked ~ label:hover ~ label, 
.rate > label:hover ~ input:checked ~ label { 
color: #c59b08; 
}

JS代碼（取以顯示從DB獲取的星號）

if($scope.Item.starRating === 'NULL'){ 
      $scope.Item.starRating = 0; 
     } 

     else if($scope.Item.starRating === '1'){ 
      document.getElementById("starRating1").checked = true; 
     } 

     else if($scope.Item.starRating === '2'){ 
      document.getElementById("starRating2").checked = true; 
     } 

     else if($scope.Item.starRating === '3'){ 
      document.getElementById("starRating3").checked = true; 
     } 

     else if($scope.Item.starRating === '4'){    
      document.getElementById("starRating4").checked = true; 
     } 
     else{ 
      document.getElementById("starRating5").checked = true; 
     }

By檢查屬性我顯示了從數據庫中提取的評分數量。但點擊後仍然會改變星星的顏色。我想停止顏色的變化。

我使用純JS，不使用JQuery

來源

2017-04-17 msm0204

您選擇的檢查狀態[更多具體]（https://developer.mozilla.org/en-US/docs/Web/CSS/特定性）比未經檢查的狀態。使未經檢查的狀態更具體。 –

如果你不希望這些輸入是可點擊的使用attr'disabled' ... – DaniP

@DaniP禁用不起作用，我認爲問題發生是由於CSS – msm0204

在所有輸入如下請使用禁用：

<input type="radio" id="starRating1" name="rate" value="1" disabled>

來源

2017-04-17 17:43:57

您的解決方案無法正常工作 - 禁用不起作用，我認爲問題是由於CSS而發生的 – msm0204

第一件事首先，你不應該訪問控制器內部的DOM元素，請寫這樣做的指示。

使用禁用似乎工作。請查看這裏的plunker解決方案 - https://plnkr.co/edit/QmGn4U5n4oLAG6f5EaNh

<div class="rate animated rubberBand" > 
    <input type="radio" id="starRating5" name="rate" value="5" disabled> 
    <label for="star5" title="text"></label> 
    <input type="radio" id="starRating4" name="rate" value="4" disabled> 
    <label for="star4" title="text"></label> 
    <input type="radio" id="starRating3" name="rate" value="3" disabled> 
    <label for="star3" title="text"></label> 
    <input type="radio" id="starRating2" name="rate" value="2" disabled> 
    <label for="star2" title="text"></label> 
    <input type="radio" id="starRating1" name="rate" value="1" disabled> 
    <label for="star1" title="text"></label>

來源

2017-05-12 03:00:52

Javascript - 如何禁用點擊這些星星的顏色變化？

回答

相關問題