[英]How to make a radio button choice limit the range of a number input box
I'm sure this is answered somewhere but I can't find it.我确定这在某处得到了回答,但我找不到。 I have a radio button and a number field like below.
我有一个单选按钮和一个如下所示的数字字段。 I want to make it so that when the first radio button is checked, the number box has a max value of 1 and when the other radio button is checked, the max value restriction is removed.
我想这样当第一个单选按钮被选中时,数字框的最大值为 1,而当另一个单选按钮被选中时,最大值限制被删除。
So like this when the first radio is checked所以当第一个收音机被检查时就像这样
<form action="test.html" method="POST">
<input id="mySelect" type="radio" name="isunique" value="0"> Unique
<input id="mySelect" type="radio" name="isunique" value="1"> Not Unique
<input type="number" min="0" max="1" step="1" name="qty">
</form>
And like this when the second radio is checked当第二台收音机被检查时就像这样
<form action="test.html" method="POST">
<input id="mySelect" type="radio" name="isunique" value="0"> Unique
<input id="mySelect" type="radio" name="isunique" value="1"> Not Unique
<input type="number" min="0" step="1" name="qty">
</form>
I tried doing it by using a function call我尝试通过使用 function 调用来做到这一点
onchange="unlimitqty()"
where the function is其中 function 是
function unlimitqty() {
var x = document.getElementById("mySelect").value;
document.getElementById("qlimit").innerHTML = "<input type=\"number\" min="0\" step=\"1\" name=\"qty\">\n";
}
And another function limitqty()还有另一个 function limitqty()
function limitqty() {
var x = document.getElementById("mySelect").value;
document.getElementById("qlimit").innerHTML = "<input type=\"number\" min=\"0\" max=\"1\" step=\"1\" name=\"qty\">\n";
}
Then I put this in the form然后我把它放在表格中
<p id="qlimit">
That produces the right behavior on the page, but the variable does not get passed through when the form gets submitted.这会在页面上产生正确的行为,但是在提交表单时不会传递变量。
I'm not really looking to fix this approach, I feel there must be a better way.我并不是真的想解决这种方法,我觉得必须有更好的方法。 There must be some javascript built in function that limits number fields.
function 中一定有一些 javascript 限制了数字字段。 I just haven't been able to find it.
我只是没能找到它。
Any help would be hugely appreciated!任何帮助将不胜感激!
You can limit the maxvalue of your number-input by setting it's attribute.您可以通过设置它的属性来限制数字输入的最大值。 The first parameter of the setAttribute function takes the value you want to change eg: 'max', 'min', etc. The second parameter takes the value you want to set to the first parameter.
setAttribute function 的第一个参数采用您要更改的值,例如:'max'、'min' 等。第二个参数采用您要设置为第一个参数的值。 In your case you can change the max value to 1 by doing this:
在您的情况下,您可以通过执行以下操作将最大值更改为 1:
document.getElementById('numberboxID').setAttribute('max', 1);
To make the value be infite you can change the parameter 2 to Infinity:要使值无限大,您可以将参数 2 更改为 Infinity:
document.getElementById('numberboxID').setAttribute('max', Infinity);
Here is one way of doing it:这是一种方法:
const inp=document.querySelector("input[type=number"); document.getElementById("max1").onchange=ev=>{ inp.max=ev.target.checked?"1":undefined; }
<form action="test.html" method="POST"> <label><input type="checkbox" id="max1"> max 1</label> <input type="number" min="0" step="1" name="qty" style="width:50px"> </form>
I took the liberty of replacing your two radio buttons with a single checkbox.我冒昧地用一个复选框替换了您的两个单选按钮。 This avoids the initial undefined stage (with no radio button selected) and is easier to operate in any case.
这避免了初始的未定义阶段(没有选择单选按钮)并且在任何情况下都更容易操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.