您应该禁用所有按钮，然后以编程方式启用单击的按钮。

// Set up an event handler on the parent of all the buttons.
// The click event will "bubble" up to that parent.
document.querySelector("#q1 .answer-btns").addEventListener("click", function(event){
  // Loop over all the buttons
  this.querySelectorAll("button").forEach(function(btn){
    btn.disabled = true;
  });
  
  // Now, enable just the one that was selected
  // The event handler is automatically passed a reference
  // to the event that triggered it and you can look at the 
  // "target" of the event to know which element was the trigger
  event.target.disabled = false;
});

个字符
话虽如此。这不是一个好的用户界面。如果用户错误地点击了错误的按钮怎么办？相反，你应该使用隐藏的单选按钮，每个单选按钮都有一个相关的label，这些按钮是可见的，并且样式看起来像一个按钮。然后，用户只能从组中选择一个，但是如果他们想，仍然可以改变主意：

document.getElementById("getChecked").addEventListener("click", function(){
   // Get the one radio button (within its group) that is checked:
   var checkedRadio = document.querySelector("input[type='radio'][name='rad']:checked");
   
   // Clear old output and log new results
   console.clear();
   console.log(checkedRadio.value);
});

x

/* Hide the checkboxes */
input[type='radio'] { display:none; }

/* Default styling for labels to make them look like buttons */
input[type='radio'] + label {
  display:inline-block;
  box-shadow:1px 1px grey;
  background-color:#e0e0e0;
  padding:5px;
  border-radius:3px;
  font-family:Arial, Helvetica, sans-serif;
  cursor:pointer;
}

/* Styling for labels when corresponding radio button is checked */
input[type='radio']:checked + label {
  box-shadow:-1px -1px grey;
  background-color:#f78d32;
}

<input type="radio" id="rad1" name="rad" value="choice 1">
<label for="rad1">Choice 1</label>

<input type="radio" id="rad2" name="rad" value="choice 2">
<label for="rad2">Choice 2</label>

<input type="radio" id="rad3" name="rad" value="choice 3">
<label for="rad3">Choice 3</label>

<p><button id="getChecked">Get the checked radio button value</button></p>

的一种或多种

对于所有按钮，可以使用

$('button').prop('disabled', true);

$('.btn').on('click', function() {
  $(this).css('background-color', 'red')
  $('button').prop('disabled', true);
})

字符串
但如果你想禁用基于类的按钮，你可以这样做

<div class="answer-btns">
   <button id="q1-btn" class="btn">Computer Style Sheets</button>

   <button id="q1-btn" class="btn">Colorful Style Sheets</button>

   <button id="q1-btn" class="btn valid">Cascading Style Sheets</button>

   <button id="q1-btn" class="btn">Creative Style Sheets</button>
 </div>

$('.btn').on('click', function() {
  $(this).css('background-color', 'red')
  $('.btn').prop('disabled', true);
})

型

请考虑以下情况。

$(function() {
  $('.btn').on('click', function() {
    $(this).parent().find(".btn").css("background-color", "red").prop('disabled', true);
    $(".btn.valid").css("background-color", "green");
  });
});

个字符
请注意ID和类的变化。
你可以在这里看到，我们可以通过引用父元素.parent()来选择所有按钮，然后用.find()找到所有按钮。这用于选择目标和其他按钮。然后，.prop()和.css()用于调整所选按钮和背景的属性。

你可以改变这样的东西，但是，你试图构建的系统中的设计有一个问题，如果你已经根据CSS类找到了正确的答案，那么任何人都可以检查你的元素，并通过查看你的HTML找到正确的答案，所以你应该考虑一下。

$(document).ready(function(){
  
  $('.btn, .btn-valid').on('click', function() {
  
    $(this).siblings("button").prop('disabled', 'true');
    $(this).siblings(".btn").css('background-color', 'red');
    $(this).siblings(".btn-valid").css('background-color', 'green');
    if($(this).hasClass("btn-valid")){
      
      $(this).css('background-color', 'green');
    }else{
      $(this).css('background-color', 'red');
    }
  })

});

个字符