[英]disable button when radio input not selected
I have a simple form like this:我有一个像这样的简单表格:
<form action="url" method="post">
<input name="id" type="radio" value="1">
<input name="id" type="radio" value="2">
<button type="submit">Submit</button>
</form>
How can I disable the button when any radio input not selected?未选择任何无线电输入时,如何禁用该按钮?
you can do it same as follow:你可以这样做:
radioHandler = (e)=>{ if($(e).prop("checked")){ $("#submitBtn").removeAttr('disabled') } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="url" method="post"> <input name="id" type="radio" value="1" onclick="radioHandler(this)"> <input name="id" type="radio" value="2" onclick="radioHandler(this)"> <button type="submit" id="submitBtn" disabled>Submit</button> </form>
You can check the length of checked radio button on clicking like the following way:您可以按以下方式检查选中单选按钮的长度:
//get all the radio buttons var radios = document.querySelectorAll('input[type=radio]'); //get only the checked radio button var checked = document.querySelectorAll('input[type=radio]:checked'); //get the submit button var btn = document.querySelector('[type=submit]'); //disable the button on page load by checking the length if(!checked.length){ btn.setAttribute("disabled", "disabled"); } //attach the event handler to all the radio buttons with forEach and addEventListener radios.forEach(function(el){ el.addEventListener('click', function(){ checked = document.querySelectorAll('input[type=radio]:checked'); if(checked.length){ //enable the button by removing the attribute btn.removeAttribute("disabled"); } }); });
<form action="url" method="post"> <input name="id" type="radio" value="1"> <input name="id" type="radio" value="2"> <button type="submit">Submit</button> </form>
Pure Javascript纯Javascript
<form action="url" method="post" >
<input class="js-radioInput" name="id" type="radio" value="1">
<input class="js-radioInput" name="id" type="radio" value="2">
<button id="my_button" type="submit" disabled>Submit</button>
</form>
var inputElems = document.getElementsByClassName("js-radioInput");
for (var i = inputElems.length - 1; i >= 0; --i) {
var elem = inputElems[i];
elem.onchange = function () {
document.getElementById("my_button").removeAttribute("disabled");
};
}
set id to the submit button and set disabled.将 id 设置为提交按钮并设置为禁用。 like this:像这样:
<form action="url" method="post">
<input name="id" type="radio" value="1">
<input name="id" type="radio" value="2">
<button type="submit" id="btn_submit" disabled>Submit</button>
</form>
and then add javascript code.然后添加javascript代码。
document.getElementsByName('id').forEach(item => {
if(item.checked)
document.getElementById('btn_submit').disabled = false;
});
A simple function like the following could be useful.像下面这样的简单函数可能很有用。
function checkButtonState() {
let input = document.querySelectorAll('input[type="radio"]');
let readInput = () => {
let button = document.querySelector('button');
document.querySelector('input[type="radio"]:checked') && document.querySelector('input[type="radio"]:checked').value == 2 ? button.removeAttribute('disabled') : button.setAttribute('disabled', true);
}
readInput();
input.forEach((v) => {
v.addEventListener('click', readInput);
});
}
You can try out, the button will be enabled only when the second radio button is checked:您可以尝试一下,该按钮只有在选中第二个单选按钮时才会启用:
function checkButtonState() { let input = document.querySelectorAll('input[type="radio"]'); let readInput = () => { let button = document.querySelector('button'); document.querySelector('input[type="radio"]:checked') && document.querySelector('input[type="radio"]:checked').value == 2 ? button.removeAttribute('disabled') : button.setAttribute('disabled', true); } readInput(); input.forEach((v) => { v.addEventListener('click', readInput); }); } checkButtonState();
<form action="url" method="post"> <input name="id" type="radio" value="1"> <input name="id" type="radio" value="2"> <button type="submit">Submit</button> </form>
Additionally you could pass the value of the radio in the function arguments.此外,您可以在函数参数中传递收音机的值。
function checkButtonState(value) {
let input = document.querySelectorAll('input[type="radio"]');
let readInput = () => {
let button = document.querySelector('button');
document.querySelector('input[type="radio"]:checked') && document.querySelector('input[type="radio"]:checked').value == value ? button.removeAttribute('disabled') : button.setAttribute('disabled', true);
}
readInput();
input.forEach((v) => {
v.addEventListener('click', readInput);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.