javascript - 单击 html bootstrap 时禁用图像

Question

我有 4 张图片，允许用户从 4 张图片中只选择一张。

当用户点击任何图片时，被点击的图片和其他 3 张图片都应该被禁用，同一用户必须再次点击“被点击”的图片才能启用该图片。

基本上我需要使图像看起来像它的可点击(带有一些边框或其他东西..)，然后点击图像说'A'用户收到一条消息(如when_i_click_carrom()所示)，发布所有应该禁用图像 (B、C、D)(仅针对该用户)，并且同一用户必须单击已禁用的图像“A”才能启用它。

注意:当前用户和其他用户只能禁用图像 A，但其他用户应该可以点击其他图像 B、C、D，直到当前用户启用图像 A

 ...
 <script>
    var when_i_click_carrom = function(){
        alert('You selected Carrom!');
    }
</script>
...
 <div class="container">


    <div class="grid_layout_row">
        <div class="col-md-6">
            <div class="sidebar"><img src="images/carrom.jpg" alt="carrom" class="img-responsive" onclick="when_i_click_carrom();"/></div>
        </div>
        <div class="col-md-6">
            <div class="sidebar"><img src="images/foosball.jpg" alt="foosball" class="img-responsive"></div>
        </div>
        <div class="col-md-6">
            <div class="sidebar"><img src="images/table-tennis.jpg" alt="table-tennis" class="img-responsive"></div>
        </div>
         <div class="col-md-6">
            <div class="sidebar"><img src="images/chess.jpg" alt="chess" class="img-responsive"></div>
        </div>
    </div>
</div>

Answer 1

尝试使用 querySelectorAll。Img 没有默认的禁用属性。所以尝试使用类

document.querySelectorAll('.img-responsive').forEach(function(a) {
  a.addEventListener('click', function() {
    this.disabled = this.disabled == true ? false : true;
    this.classList.toggle('disable')
    //console.log(this.disabled)
  })
})

.disable {
  opacity: 0.5;
}

<div class="container">
  <div class="grid_layout_row">
    <div class="col-md-6">
      <div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="carrom" class="img-responsive"></div>
    </div>
    <div class="col-md-6">
      <div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="foosball" class="img-responsive"></div>
    </div>
    <div class="col-md-6">
      <div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="table-tennis" class="img-responsive"></div>
    </div>
    <div class="col-md-6">
      <div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="chess" class="img-responsive"></div>
    </div>
  </div>
</div>