Как отключить переключатель, если не выбрана опция - PullRequest
Новая
       2

Как отключить переключатель, если не выбрана опция

1 голос
/ 23 сентября 2019

У меня 3 переключателя работают нормально, но проблема в том, как отключить кнопку «Отправить», если в параметрах радио не выбрана опция.Пожалуйста, помогите, если есть решение 

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;
    }
}
}
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 {
}
<form name="radioExampleForm" method="get" action="" onsubmit="return false;">
<p>&nbsp;<label for="number0"><input type="radio" value="http://www.google.com" name="number"     id="number0"> Zero</label></br>
&nbsp;<label for="number1"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label></br>
&nbsp;<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>

Пожалуйста, помогите, если есть какое-либо решение Доступно для отключения кнопки «Отправить», когда не выбраны опции радио.jQuery код, пожалуйста, помогите мне выделенный текст

Ответы [ 4 ]

0 голосов
/ 23 сентября 2019 

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;
    }
}
}
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 {
}
<form name="radioExampleForm" method="get" action="" onsubmit="return false;">
<p>&nbsp;<label for="number0" onclick="enableSubmitBtn()"><input type="radio" value="http://www.google.com" name="number" id="number0"> Zero</label></br>
&nbsp;<label for="number1" onclick="enableSubmitBtn()"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label></br>
&nbsp;<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>
0 голосов
/ 23 сентября 2019

Самый эффективный способ добиться отключения кнопки отправки - это просто добавить атрибут disabled непосредственно в HTML-код ввода кнопки отправки.Таким образом, кнопка отправки отключается до того, как она будет отображена на экране: 

<input disabled id="submitBtn" type="button" onclick="window.open(getCheckedValue(document.forms['radioExampleForm'].elements['number']), '_blank');" value="Submit">

После этого вы можете добавить прослушиватель события щелчка к документу, так что "когда радиоэлементвыбрано "(имеет имя number), вы можете немедленно удалить этот атрибут disabled из ввода кнопки отправки и, следовательно, сделать его снова включенным: 

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);
    }
});
0 голосов
/ 23 сентября 2019

Чистый JS: Попробуйте это 

function handleChange1(){
	document.getElementById("test").disabled = false;;
}
<form name="radioExampleForm" method="get" action="" onsubmit="return false;">
<p>&nbsp;<label for="number0"><input type="radio" onchange="handleChange1()" value="http://www.google.com" name="number"     id="number0"> Zero</label></br>
&nbsp;<label for="number1"><input type="radio" onchange="handleChange1()" value="http://www.ebay.com" name="number" id="number1"> One</label></br>
&nbsp;<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>
0 голосов
/ 23 сентября 2019

Добавьте disabled атрибут к кнопке HTML и добавьте этот код для прослушивания изменений в переключателях.При изменении включите кнопку отправки.

Я добавил этот код 

var radioBtns = document.radioExampleForm.number;
for (var i = 0; i < radioBtns.length; i++) {
    radioBtns[i].addEventListener('change', function() {
      document.getElementById("submitBtn").disabled = false;
    });
}


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;
    }
}
}
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 {
}
<form name="radioExampleForm" method="get" action="" onsubmit="return false;">
<p>&nbsp;<label for="number0"><input type="radio" value="http://www.google.com" name="number"     id="number0"> Zero</label></br>
&nbsp;<label for="number1"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label></br>
&nbsp;<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...