如何在jquery中使问答中的其他选项不可点击

Question

这里是jquery的新手，我正试图使用这个框架构建一个问答，所以，我一直在尝试这样做，当其中一个选项被点击时，其他选项应该立即使用条件语句保持不可点击，这是我的html、css和javascript(jquery(代码，提前谢谢。

$(document).ready(()=>{
const question = [
{
Question: "chair",
optionA: "dk",
optionB: "kd",
optionC: "dk",
optionD: "dkd",
answer: "optionA"
},
{
Question: "Table",
optionA: "tabl",
optionB: "ta",
optionC: "t",
optionD: "tabil",
answer: "optionA"
},
{
Question: "lord",
optionA: "lor",
optionB: "lo",
optionC: "l",
optionD: "love",
answer: "optionA"
},
{
Question: "boyy",
optionA: "boy",
optionB: "bo",
optionC: "b",
optionD: "bb",
answer: "optionA"
}]

let questionNumber= 0;
$('#startbutton').on('click', ()=>{
$('#startbutton').hide();
$('.questions').show();
$('.quest').html(question[questionNumber].Question);
$('#optionA').html(question[questionNumber].optionA);
$('#optionB').html(question[questionNumber].optionB);
$('#optionC').html(question[questionNumber].optionC);
$('#optionD').html(question[questionNumber].optionD);
})
$('.option').on('click', (event)=>{
if(event.target.id === question[questionNumber].answer){
$('.option').removeClass('wronganswer');
$(event.target).addClass('correctanswer');


}

else{
$('.option').removeClass('correctanswer')
$('.option').removeClass('wronganswer')
$(event.target).addClass('wronganswer');

}

})
$('.nextbutton').on('click', ()=>{
if(questionNumber<5){
$('.quest').html(question[questionNumber+1].Question);
$('#optionA').html(question[questionNumber+1].optionA);
$('#optionB').html(question[questionNumber+1].optionB);
$('#optionC').html(question[questionNumber+1].optionC);
$('#optionD').html(question[questionNumber+1].optionD); 
questionNumber++;
}
$('.option').removeClass('wronganswer');
$('.option').removeClass('correctanswer');

})
});

.questions {
display: none;
text-align: center;
margin: auto;
}
#startbutton{
text-align: center;
margin-top: 30%;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
}
#startbutton:hover{
color: blanchedalmond;
background-color: black;
}
.option{
border: 2px solid #997295;
margin-bottom: 5px;
background-color: #5B63B7;
color: #CBCCFF;
border-radius: 5px;
cursor: pointer;
}
.quest{
border: 2px solid #997295;
margin-bottom: 30px;
background-color:  #CBCCFF;
color: #5B63B7;
border-radius: 5px;
font-size: 29px;
cursor: not-allowed;
}
.option:hover{
color: #5B63B7;
background-color:  #CBCCFF;
}
ul{
display: inline-block;
}
.nextbutton{
color: #CBCCFF;
padding: 5px;
width: fit-content;
margin-left: 80%;
background-color: #997295;
cursor: pointer;
}
.nextbutton:hover{
border: 3px solid #CBCCFF;
color: #CBCCFF;

}
.correctanswer, .correctanswer:hover{
color: white;
background-color: green;
}
.wronganswer, .wronganswer:hover{
color: white;
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1 id="startbutton">CLICK HERE TO START THE QUIZ</h1>
<div class="questions">
<h2 class="topic"></h2>
<h6 class="quest"></h6>
<p class ="option" id="optionA"></p>
<p class ="option" id="optionB"></p>
<p class ="option" id="optionC"></p>
<p class ="option" id="optionD"></p>
<p class="nextbutton">NEXT></p>
</div>

Answer 1

如果点击按钮，则查看问题是否有新的类">点击"，如果是，则中断并无所事事。否则，请添加此类。当转到下一个问题时，只需删除这个停止的"点击"类，您就可以对下一个提问进行投票。

这里的相关行：

if ($('div.questions').hasClass('clicked')) return;
$('div.questions').addClass('clicked');
...
$('div.questions').removeClass('clicked');

在这里你可以测试它：

$(document).ready(()=>{
const question = [
{
Question: "chair",
optionA: "dk",
optionB: "kd",
optionC: "dk",
optionD: "dkd",
answer: "optionA"
},
{
Question: "Table",
optionA: "tabl",
optionB: "ta",
optionC: "t",
optionD: "tabil",
answer: "optionA"
},
{
Question: "lord",
optionA: "lor",
optionB: "lo",
optionC: "l",
optionD: "love",
answer: "optionA"
},
{
Question: "boyy",
optionA: "boy",
optionB: "bo",
optionC: "b",
optionD: "bb",
answer: "optionA"
}]

let questionNumber= 0;
$('#startbutton').on('click', ()=>{
$('#startbutton').hide();
$('.questions').show();
$('.quest').html(question[questionNumber].Question);
$('#optionA').html(question[questionNumber].optionA);
$('#optionB').html(question[questionNumber].optionB);
$('#optionC').html(question[questionNumber].optionC);
$('#optionD').html(question[questionNumber].optionD);
})
$('.option').on('click', (event)=>{
if ($('div.questions').hasClass('clicked')) return;
$('div.questions').addClass('clicked');
if(event.target.id === question[questionNumber].answer){
$('.option').removeClass('wronganswer');
$(event.target).addClass('correctanswer');


}

else{
$('.option').removeClass('correctanswer')
$('.option').removeClass('wronganswer')
$(event.target).addClass('wronganswer');

}

})
$('.nextbutton').on('click', ()=>{
$('div.questions').removeClass('clicked');
if(questionNumber<5){
$('.quest').html(question[questionNumber+1].Question);
$('#optionA').html(question[questionNumber+1].optionA);
$('#optionB').html(question[questionNumber+1].optionB);
$('#optionC').html(question[questionNumber+1].optionC);
$('#optionD').html(question[questionNumber+1].optionD); 
questionNumber++;
}
$('.option').removeClass('wronganswer');
$('.option').removeClass('correctanswer');

})
});

.questions {
display: none;
text-align: center;
margin: auto;
}
#startbutton{
text-align: center;
margin-top: 30%;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
}
#startbutton:hover{
color: blanchedalmond;
background-color: black;
}
.option{
border: 2px solid #997295;
margin-bottom: 5px;
background-color: #5B63B7;
color: #CBCCFF;
border-radius: 5px;
cursor: pointer;
}
.quest{
border: 2px solid #997295;
margin-bottom: 30px;
background-color:  #CBCCFF;
color: #5B63B7;
border-radius: 5px;
font-size: 29px;
cursor: not-allowed;
}
.option:hover{
color: #5B63B7;
background-color:  #CBCCFF;
}
ul{
display: inline-block;
}
.nextbutton{
color: #CBCCFF;
padding: 5px;
width: fit-content;
margin-left: 80%;
background-color: #997295;
cursor: pointer;
}
.nextbutton:hover{
border: 3px solid #CBCCFF;
color: #CBCCFF;

}
.correctanswer, .correctanswer:hover{
color: white;
background-color: green;
}
.wronganswer, .wronganswer:hover{
color: white;
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1 id="startbutton">CLICK HERE TO START THE QUIZ</h1>
<div class="questions">
<h2 class="topic"></h2>
<h6 class="quest"></h6>
<p class ="option" id="optionA"></p>
<p class ="option" id="optionB"></p>
<p class ="option" id="optionC"></p>
<p class ="option" id="optionD"></p>
<p class="nextbutton">NEXT></p>
</div>