J'ai 3 boutons radio fonctionnels, mais comment puis-je désactiver le bouton d'envoi quand aucune option n'est sélectionnée dans les boutons radio?
<form name="radioExampleForm" method="get" action="" onsubmit="return false;"> <p> <label for="number0"><input type="radio" value="http://www.google.com" name="number" id="number0"> Zero</label></br> <label for="number1"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label></br> <label for="number2"><input type="radio" value="http://www.gamestop.com" name="number" id="number2"> Two</label></br> </p> <input type="button" onclick="window.open(getCheckedValue(document.forms['radioExampleForm'].elements['number']), '_blank');" value="Submit"> </form>
input[type=radio] {
-webkit-appearance: radio;
-O-appearance: radio;
-moz-appearance: radio;
opacity:1;
}
#header .bottom-header.blog h1 {
font-size: 64px;
color: red
}
input[type=radio]:hover + label {
border: solid 1px white; padding: 5px; border-radius: 1px;
border-color : red;
color : red;
opacity:1;
}
input[type=radio]:checked + label {
border: solid 2px white; padding: 5px; border-radius: 1px;
border-color : red;
color : red;
opacity:1;
}
input[type=text] {
font-weight:bold;
}
input[type=text]:hover {
}
input[type=email]:hover {
}
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
4 Réponses :
Ajouter l'attribut désactivé au code HTML du bouton
et ajoutez ce code pour écouter les changements dans les boutons radio. en cas de modification, activez le bouton d'envoi.
J'ai ajouté ce code
<form name="radioExampleForm" method="get" action="" onsubmit="return false;"> <p> <label for="number0"><input type="radio" value="http://www.google.com" name="number" id="number0"> Zero</label></br> <label for="number1"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label></br> <label for="number2"><input type="radio" value="http://www.gamestop.com" name="number" id="number2"> Two</label></br> </p> <input type="button" id="submitBtn" disabled onclick="window.open(getCheckedValue(document.forms['radioExampleForm'].elements['number']), '_blank');" value="Submit"> </form>
input[type=radio] {
-webkit-appearance: radio;
-O-appearance: radio;
-moz-appearance: radio;
opacity:1;
}
#header .bottom-header.blog h1 {
font-size: 64px;
color: red
}
input[type=radio]:hover + label {
border: solid 1px white; padding: 5px; border-radius: 1px;
border-color : red;
color : red;
opacity:1;
}
input[type=radio]:checked + label {
border: solid 2px white; padding: 5px; border-radius: 1px;
border-color : red;
color : red;
opacity:1;
}
input[type=text] {
font-weight:bold;
}
input[type=text]:hover {
}
input[type=email]:hover {
}
var radioBtns = document.radioExampleForm.number;
for (var i = 0; i < radioBtns.length; i++) {
radioBtns[i].addEventListener('change', function() {
document.getElementById("submitBtn").disabled = false;
});
}
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
var radioBtns = document.radioExampleForm.number;
for (var i = 0; i < radioBtns.length; i++) {
radioBtns[i].addEventListener('change', function() {
document.getElementById("submitBtn").disabled = false;
});
}
ne fonctionne pas en dessous de #Lonnie Best a ajouté le code qui fonctionne
Je ne sais pas pourquoi cela ne fonctionne pas pour vous, assurez-vous d'ajouter l'ID du bouton et l'attribut de désactivation au bouton html
Le moyen le plus efficace de désactiver le bouton d'envoi est d'ajouter simplement un attribut désactivé directement dans le code HTML de l'entrée du bouton d'envoi. De cette façon, le bouton d'envoi est désactivé avant même d'être rendu à l'écran:
document.addEventListener('click', function enableSubmit(event)
{
let submitBtn = document.getElementById("submitBtn");
if (event.target.type === "radio" && event.target.name === "number")
{
submitBtn.removeAttribute("disabled");
// Now, we can also remove this vary event listener:
document.removeEventListener('click', enableSubmit);
}
});
Après cela, vous pouvez ajouter un écouteur d'événement de clic au document, de sorte que, "quand une radio -item is selected "(qui porte le nom de number ) vous pouvez immédiatement supprimer cet attribut disabled de l'entrée du bouton d'envoi, et donc le réactiver: p>
<input disabled id="submitBtn" type="button" onclick="window.open(getCheckedValue(document.forms['radioExampleForm'].elements['number']), '_blank');" value="Submit">
Pure JS: essayez ceci
<form name="radioExampleForm" method="get" action="" onsubmit="return false;"> <p> <label for="number0"><input type="radio" onchange="handleChange1()" value="http://www.google.com" name="number" id="number0"> Zero</label></br> <label for="number1"><input type="radio" onchange="handleChange1()" value="http://www.ebay.com" name="number" id="number1"> One</label></br> <label for="number2"><input type="radio" onchange="handleChange1()" value="http://www.gamestop.com" name="number" id="number2"> Two</label></br> </p> <input id ="test" type="button" onclick="window.open(getCheckedValue(document.forms['radioExampleForm'].elements['number']), '_blank');" value="Submit" disabled> </form>
function handleChange1(){
document.getElementById("test").disabled = false;;
}
<form name="radioExampleForm" method="get" action="" onsubmit="return false;"> <p> <label for="number0" onclick="enableSubmitBtn()"><input type="radio" value="http://www.google.com" name="number" id="number0"> Zero</label></br> <label for="number1" onclick="enableSubmitBtn()"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label></br> <label for="number2" onclick="enableSubmitBtn()"><input type="radio" value="http://www.gamestop.com" name="number" id="number2"> Two</label></br> </p> <input type="button" id="submitBtn" disabled="true" onclick="window.open(getCheckedValue(document.forms['radioExampleForm'].elements['number']), '_blank');" value="Submit"> </form>
input[type=radio] {
-webkit-appearance: radio;
-O-appearance: radio;
-moz-appearance: radio;
opacity:1;
}
#header .bottom-header.blog h1 {
font-size: 64px;
color: red
}
input[type=radio]:hover + label {
border: solid 1px white; padding: 5px; border-radius: 1px;
border-color : red;
color : red;
opacity:1;
}
input[type=radio]:checked + label {
border: solid 2px white; padding: 5px; border-radius: 1px;
border-color : red;
color : red;
opacity:1;
}
input[type=text] {
font-weight:bold;
}
input[type=text]:hover {
}
input[type=email]:hover {
}
function enableSubmitBtn(){
document.getElementById("submitBtn").disabled = false;
}
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
console.log('call');
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
ne fonctionne pas au-dessus de #Lonnie Best a ajouté le code qui fonctionne
Ne faites pas plus de travail pour les autres en vandalisant vos messages. En publiant sur le réseau Stack Exchange, vous avez accordé un droit non révocable, sous le CC BY- Licence SA 4.0 , pour que Stack Exchange distribue ce contenu (c'est-à-dire quels que soient vos choix futurs). Selon la politique de Stack Exchange, la version non vandalisée de la publication est celle qui est distribuée. Ainsi, tout vandalisme sera annulé. Si vous souhaitez en savoir plus sur la suppression d'un message, veuillez consulter: Comment fonctionne la suppression?