HTML 表单编号类型唯一用户输入答案

【问题标题】：HTML Form Number Type Unique User InputHTML 表单编号类型唯一用户输入
【发布时间】：2015-08-09 06:01:52
【问题描述】：

我正在使用下面的代码要求用户对他们最喜欢的糖果进行排名（优先级）。用户需要从 1-3 排名（1 为最佳）

<form id="form1" name="form1" method="post" action="">
<input type="number" name="cake" id="cake" required="required" max="3" min="1"/>Cake     <br />
<input type="number" name="twizlers" id="twizlers"required="required" max="3" min="1"/>Twizlers <br />
<input type="number" name="taffy" id="taffy" required="required" max="3" min="1"/>Taffy <br /><br />
<input type="submit" name="button" id="button" value="Submit" />
</form>

我正在使用 HTML 5 编码来确保它们只使用数字 1、2 和 3，但我如何确保它们不会使用相同的数字两次？是否有我可以使用的 HTML 输入代码，或者是否需要一些 javascript 代码？如果需要 javascript，您有什么建议？

【问题讨论】：

使用单选按钮？有许多正在使用的浏览器不支持您正在使用的属性，因此无论如何都不会受到这些值的限制。

标签： javascript html forms numbers unique

【解决方案1】：

<script type="text/javascript">
    function item() {
        cake = Number(document.getElementById('cake').value);
        twizlers = Number(document.getElementById('twizlers').value);
        taffy = Number(document.getElementById('taffy').value);
        if (cake == twizlers) {
            alert("Some alert cake or twizlers");
            return false;
        } else if (twizlers == taffy) {
            alert("Some alert taffy or twizlers");
            return false;
        } else if (taffy == cake) {
            alert("Some alert taffy or cake");
            return false;
        } else {
            return true;
        }
    }
</script>

这会起作用，否则你可以使用单选按钮。

【讨论】：

【解决方案2】：

您可以使用 JS 检查用户是否仅使用单个值对 1 个项目进行排名，并且无法再次对该项目进行排名。您可以使用 JS 来执行此操作。为您的输入字段插入一个 ID，然后

    document.getElementById("your_id").disabled = false;
    document.getElementById("your_id").disabled = false;
    document.getElementById("your_id").disabled = false;

    var var1 = document.getElementById("your_id");
    var1.onchange = function () {
    if (this.disabled == true) {
     document.getElementById("your_id").disabled = true;
     }
    }

因此检查这三个项目。

【讨论】：