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

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 更改为无穷大：

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>

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

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

How to make a radio button choice limit the range of a number input box

javascript

forms