如何使单选按钮选择限制数字输入框的范围

Question

我确定这在某处得到了回答，但我找不到。我有一个单选按钮和一个如下所示的数字字段。我想让它在第一个单选按钮被选中时，数字框的最大值为 1，而当另一个单选按钮被选中时，最大值限制被删除。

所以当第一个收音机被选中时是这样的

<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>

当第二个收音机被选中时就像这样

<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>

我尝试使用函数调用来做到这一点

onchange="unlimitqty()"

函数在哪里

function unlimitqty() {
  var x = document.getElementById("mySelect").value;
    document.getElementById("qlimit").innerHTML = "<input type=\"number\" min="0\" step=\"1\" name=\"qty\">\n";
}

还有另一个函数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";
}

然后我把这个放在表格里

<p id="qlimit">

这会在页面上产生正确的行为，但在提交表单时不会传递变量。

我并不是真的要修复这种方法，我觉得一定有更好的方法。必须有一些 JavaScript 内置函数来限制数字字段。就是没找到。

任何帮助将不胜感激！

Answer 1

您可以通过设置其属性来限制数字输入的最大值。 setAttribute 函数的第一个参数采用您要更改的值，例如：“max”、“min”等。第二个参数采用您要设置为第一个参数的值。在您的情况下，您可以通过执行以下操作将最大值更改为 1：

document.getElementById('numberboxID').setAttribute('max', 1);

要使值无限大，您可以将参数 2 更改为 Infinity：

document.getElementById('numberboxID').setAttribute('max', Infinity);  

编辑： 您可以使用以下方法将值设置为 1：

document.getElementById('numberboxID').value = 1;

你也可以在不使用 setAttribute 的情况下更改最大值：

document.getElementById('numberboxID').max = 1;

Answer 2

这是一种方法：

const inp=document.querySelector("input[type=number");
document.getElementById("max1").onchange=ev=>{
  inp.max=ev.target.checked?(inp.value=Math.min(inp.value,1),"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>

我冒昧地用一个复选框替换了您的两个单选按钮。这避免了初始的未定义阶段（没有选择单选按钮）并且在任何情况下都更易于操作。