极客教程JavaScript 如何禁用单选按钮
在HTML中，我们有一个功能可以从多个给定的选项中选择一个选项，并且我们可以借助单选按钮来实现。因此，在本文中，我们将学习如何在某些情况下禁用这些单选按钮。我们将了解单选按钮的工作原理以及为什么需要禁用它们，我们将提供一些标准示例以获得更好的理解。
单选按钮 基本上是一些可选择的按钮，我们可以使用这些按钮从多个给定的选项中选择一个选项，并且我们必须从所有单选按钮选项中选择一个选项。
为什么需要禁用它们？
我们使用单选按钮从多个选项中选择一个选项，但在某些场景下，我们需要禁用它们。例如，我们有两个问题，我们喜欢玩游戏吗？如果我们选择了“是”，那么我们可以从多个选项中选择任意一个，但如果我们一开始选择了“否”，那么我们必须禁用那些游戏选项，用户无法选择它们，我们将在示例中看到并获得更好的理解。
我们将如何禁用单选按钮： 在HTML中，对于input元素，我们有一个叫做disabled的属性，这是一个布尔值属性，我们可以选择true或false。我们将使用此属性来禁用单选按钮。
示例1： 在这个示例中，我们有两个问题，第一个是一个“是”或“否”的问题，如果用户选择“是”，单选按钮将不会被禁用，如果用户选择“否”，那么我们将禁用单选按钮。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS code required for the page -->
<style>
body {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10%;
background: rgb(51, 51, 51);
}
.main {
width: 60%;
height: 100%;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
border-radius: 20px;
background-color: rgb(0, 0, 0);
color: white;
font-family: montserrat;
font-size: 0.8rem;
}
#submit {
width: 30%;
margin: 20px;
height: 40px;
border-radius: 20px;
background-color: rgb(0, 133, 7);
color: rgb(0, 0, 0);
font-family: montserrat;
font-size: 1rem;
font-weight: bold;
border: none;
cursor: pointer;
}
#submit:hover {
background-color: rgb(0, 98, 5);
color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<div class="main">
<h1>Do you listen musing while coding?</h1>
<div class="question1">
<label>
<input name="music" type="radio"
id="yes" value="yes" /> Yes
</label>
<label>
<input name="music" type="radio" id="no"
value="no" onchange="check()" /> No
</label>
</div>
<h2>
If yes, What kind of music
do you prefer?
</h2>
<div class="question2">
<label>
<input type="radio" name="Musics"
id="Pop" value="pop" />Pop</label>
<label>
<input type="radio" name="Musics"
id="Rock" value="rock" />Rock</label>
<label>
<input type="radio" name="Musics"
id="Jazz" value="jazz" />Jazz</label>
<label>
<input type="radio" name="Musics"
id="Classical" value="classical" />
Classical
</label>
</div>
<button id="submit" onclick="message()">
submit
</button>
</div>
<script>
// This function will check if the user has
// selected any option from the question 1
function check() {
if (document.getElementById('no').checked) {
document.getElementById('Pop').disabled = true;
document.getElementById('Rock').disabled = true;
document.getElementById('Jazz').disabled = true;
document.getElementById('Classical').disabled = true;
}
else {
document.getElementById('Pop').disabled = false;
document.getElementById('Rock').disabled = false;
document.getElementById('Jazz').disabled = false;
document.getElementById('Classical').disabled = false;
}
}
// This function will give the message after
// the user clicks on the submit button.
function message() {
if (document.getElementById('yes').checked) {
if (document.getElementById('Pop').checked) {
alert("You like pop music");
}
else if (document.getElementById('Rock').checked) {
alert("You like rock music");
}
else if (document.getElementById('Jazz').checked) {
alert("You like jazz music");
}
else if (document.getElementById('Classical').checked) {
alert("You like classical music");
}
}
else {
alert("You don't listen musing while coding");
}
alert("Thank you for your response!");
}
</script>
</body>
</html>
输出：
示例2： 在这个示例中，我们会有三个问题，根据第一个问题，我们将禁用剩下两个问题中的一个问题，并反之亦然。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS code required for the page -->
<style>
body {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10%;
background: rgb(51, 51, 51);
}
.main {
width: 60%;
height: 100%;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
border-radius: 20px;
background-color: rgb(255, 255, 255);
color: rgb(27, 27, 27);
font-family: montserrat;
font-size: 0.8rem;
}
#submit {
width: 30%;
margin: 20px;
height: 40px;
border-radius: 20px;
background-color: rgb(34, 34, 34);
color: rgb(255, 255, 255);
font-family: montserrat;
font-size: 1rem;
font-weight: bold;
border: none;
cursor: pointer;
}
#submit:hover {
background-color: rgb(0, 98, 5);
color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<div class="main">
<h1>What kind of meal do you prefer?</h1>
<div class="question">
<label> <input type="radio" name="meal"
id="veg" onchange="check()">Veg</label>
<label> <input type="radio" name="meal"
id="nonveg" onchange="check()">
Non-Veg
</label>
</div>
<h2>Veg menu</h2>
<div class="veg_menu">
<label> <input type="radio"
name="veg_meal" id="salad">Salad</label>
<label> <input type="radio"
name="veg_meal" id="soup">Soup</label>
<label> <input type="radio"
name="veg_meal" id="dessert">Dessert
</label>
</div>
<h2>Non-veg Menu</h2>
<div class="non-veg_menu">
<label> <input type="radio"
name="non_veg_meal" id="chicken">Chicken</label>
<label> <input type="radio" name="non_veg_meal"
id="mutton">Mutton</label>
<label> <input type="radio" name="non_veg_meal"
id="fish">Fish</label>
</div>
<button id="submit" onclick="message(),resetMessage()">
submit
</button>
</div>
<script>
function check() {
if (document.getElementById('veg').checked) {
document.getElementById('chicken').disabled = true;
document.getElementById('mutton').disabled = true;
document.getElementById('fish').disabled = true;
document.getElementById('salad').disabled = false;
document.getElementById('soup').disabled = false;
document.getElementById('dessert').disabled = false;
}
else if (document.getElementById('nonveg').checked) {
document.getElementById('salad').disabled = true;
document.getElementById('soup').disabled = true;
document.getElementById('dessert').disabled = true;
document.getElementById('chicken').disabled = false;
document.getElementById('mutton').disabled = false;
document.getElementById('fish').disabled = false;
}
}
function message() {
if (document.getElementById('veg').checked) {
if (document.getElementById('salad').checked) {
alert("You have selected Salad");
}
else if (document.getElementById('soup').checked) {
alert("You have selected Soup");
}
else if (document.getElementById('dessert').checked) {
alert("You have selected Dessert");
}
else {
alert("Please select a meal");
}
}
else if (document.getElementById('nonveg').checked) {
if (document.getElementById('chicken').checked) {
alert("You have selected Chicken");
}
else if (document.getElementById('mutton').checked) {
alert("You have selected Mutton");
}
else if (document.getElementById('fish').checked) {
alert("You have selected Fish");
}
else {
alert("Please select a meal");
}
}
else {
alert("Please select a meal");
}
}
</script>
</body>
</html>
输出：
