En HTML , tenemos una función a través de la cual podemos seleccionar una opción de varias opciones dadas, y podemos hacerlo con la ayuda del botón de opción. Entonces, en este artículo, aprenderemos cómo podemos deshabilitar estos botones de opción en algunas circunstancias. veremos cómo funcionan los botones de radio y por qué necesitamos desactivarlos, tendremos algunos ejemplos estándar para comprender mejor lo que vamos a hacer.
Los botones de radio básicamente son algunos botones seleccionables, podemos usar estos botones para seleccionar una sola opción de varias opciones dadas y tenemos que seleccionar casi una opción de todas las opciones de botones de radio.
¿Por qué tenemos que deshabilitarlos?
Usamos botones de radio para seleccionar una opción entre varias, pero en algunos escenarios, tenemos que deshabilitarlos. por ejemplo, tenemos dos preguntas sobre si nos gusta jugar juegos o no, si seleccionamos sí, entonces podemos seleccionar cualquier opción de múltiples opciones, pero si elegimos no en primer lugar, entonces tenemos que deshabilitar esas opciones de juegos que usamos. no puede elegirlos, veremos esto en un ejemplo y obtendremos una mejor comprensión.
Cómo vamos a deshabilitar el botón de radio: En HTML para el elemento de entrada tenemos un atributo llamado disabled , este es un atributo de valor booleano, podemos elegir entre verdadero o falso, usaremos este atributo para deshabilitar el botón de radio.
Ejemplo 1: En este ejemplo, tenemos dos preguntas, la primera es una pregunta de «sí» o «no» , si el usuario selecciona «sí», los botones de opción no se desactivarán, si el usuario selecciona «no», entonces los desactivaremos. los botones de radio.
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>
Producción:
Ejemplo 2: En este ejemplo, tendremos tres preguntas, en base a la primera pregunta deshabilitaremos una pregunta de las dos restantes y viceversa.
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>
Producción:
