Jquery 需要在多个选择字段上验证唯一的特定值

我有一个带有一组下拉字段的表单，每个字段的默认值为“0”，可用值为1-3。这些是作为优先选择，用户选择他们的前3项。每个select字段名都是唯一的，并填充在一个PHP foreach循环中——在下面的示例中，我只是将其称为“N”

<select class="variable_priority unique required" name="select-N">
    <option value="0"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

---

但是，我仍然需要验证用户是否确实在任何select字段中输入了值1、2和3，并且没有跳过任何字段。有谁能给我一些关于如何在JQuery Validate的上下文中执行此操作的指导吗？

我会首先让浏览器完成大部分工作，因此我会使用HTML5属性，如

必需的
禁用的
和
选定的
，以获得良好的效果

你可以试试这样的

<select class="variable_priority unique required" name="select-N" required>
  <option value="0" disabled></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

此if语句将检查所选
下拉列表的计数与页面上下拉列表总数的比较。如果它们匹配，则表格有效

我希望这对您有所帮助。
在重新处理JS Fiddle的需求之后

我想这可能更接近你的要求

HTML

JavaScript

$(document).ready(function() {

    function checkSelected(val) {
        var ret = false;
        $(".variable_priority").each(function() {
            if ($(this).val() === val) {
                ret = true;
            }
        });
        return ret;
    }

    function totalValue() {
        var total = 0;
        $(".variable_priority:first option[value!=0]").each(function() {
            total = total + parseInt($(this).val(), 10);
        });
        return total;
    }
    function totalSelectedValue(){
        var total = 0;
        $(".variable_priority option:selected").each(function() {
            total = total + parseInt($(this).val(), 10);
        });
        return total;
    }
    $('.value').html(totalValue());
    $('.variable_priority').change(function() {
   //     variable_priority = variable_priority + parseInt($(this).val(), 10);
        $('.value').html(totalSelectedValue() + " out of " + totalValue());

        $('option', this).each(function() {
            if (checkSelected($(this).val()) && $(this).val() !== "0") {
                $('.variable_priority option[value=' + $(this).val() + ']').attr('disabled', true);
            } else {
                $('.variable_priority option[value=' + $(this).val() + ']').removeAttr('disabled');
            }
        });
        if (totalSelectedValue() === totalValue()) {
            $('.selects').removeClass('invalid').addClass('valid');
        } else {
            $('.selects').removeClass('valid').addClass('invalid');
        }
    });
});

现在我必须回去工作了

享受
试试这个：

<script>$(document).ready(function() {
$('select').change(function() {
    $('option[value=' + $(this).val() + ']').attr('disabled', 'disabled');
});

$（文档）.ready（函数（）{
$（'select'）.change（函数（）{
$（'option[value='+$（this.val（）+']）.attr（'disabled'，'disabled'）；
});

}))

将这些值相加，确保它们不是全部=2@Diodeus--谢谢你的建议。我是一个JavaScript新手，那么有没有一种无痛的方法可以基于选择器总结一串值呢？例如，在下面的答案中，基于select.variable\u priority:selected。我假设它应该是=6，即1+2+3。谢谢你的想法。我还不能完全使用HTML5，但我很欣赏这种洞察力。至于验证代码，我试过这样做：
if（$（$select.variable\u priority:selected”）.length==8）
在我的测试用例中，我的select对象有8个选项。上面的脚本仅在长度=8时返回true。它应该是length==3，以验证是否有三个条目，即优先级值1、2和3。我已经修改了默认选项，不返回值（），但不知怎么的，它们仍然被计入总数：selected。我认为您使用的是带有multi-select的
。这是对的吗？不-如果我不清楚，很抱歉。在我的测试用例中，我有一组八个字段，每个字段的值为0、1、2或3。我需要用户在三个字段中进行选择，将其中一个字段标记为“1”，其中一个字段标记为“2”，另一个字段标记为“3”。无重复，必须选择所有三个值，将其他值保留为“0”。通过对答案的值求和并返回false直到它们=6（1+2+3），我得到了验证。它可以工作，但错误消息是在字段级别而不是全局级别处理的，因此有点麻烦。另外，我必须对唯一的应答请求使用单独的验证。下面是用于测试特定值的验证：`varsum:function（value，element）{var-sumOfValues=0；$（“.variable_priority”）.each（function（）{sumOfValues+=Number（$（this.val（））；}）；if（sumOfValues==6）{return true}else{return false}，`以下是用于测试唯一值的验证：`unique:function（value，element）{var parentForm=$（element）.closest（'form'）；var timeRepeated=0；$（'variable_priority'）。each（函数（）{if（$（this）.val（）==value&$（this.val（）>0）{timeRepeated++}）；if（timeRepeated==1 | | timeRepeated==0）{return true}else{return false}}，`非常感谢您的工作和见解。我喜欢它在页面上的工作方式以及您如何集成不同的验证。但是，尽我所能，因为具有选定值（1,2,3）的项目被设置为“禁用”，信息没有通过$_POST数据传递到我的下一个表单页面。我得到的是一个包含五个数据集的数组，值为0，但不是1、2或3。有没有关于如何传递这些值的想法？没关系-我能够使用一些绑定代码解决这个问题：$（'form'）。bind（'submit'，function（）{$（this）。查找（'option'）.removeAttr（'disabled'）；}）；
<div class="selects">
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
<div class="value">
    0
</div>

.valid{
    box-shadow:0 0 10px green;
    -webkit-box-shadow:0 0 10px green;
    -moz-box-shadow:0 0 10px green;
}

$(document).ready(function() {

    function checkSelected(val) {
        var ret = false;
        $(".variable_priority").each(function() {
            if ($(this).val() === val) {
                ret = true;
            }
        });
        return ret;
    }

    function totalValue() {
        var total = 0;
        $(".variable_priority:first option[value!=0]").each(function() {
            total = total + parseInt($(this).val(), 10);
        });
        return total;
    }
    function totalSelectedValue(){
        var total = 0;
        $(".variable_priority option:selected").each(function() {
            total = total + parseInt($(this).val(), 10);
        });
        return total;
    }
    $('.value').html(totalValue());
    $('.variable_priority').change(function() {
   //     variable_priority = variable_priority + parseInt($(this).val(), 10);
        $('.value').html(totalSelectedValue() + " out of " + totalValue());

        $('option', this).each(function() {
            if (checkSelected($(this).val()) && $(this).val() !== "0") {
                $('.variable_priority option[value=' + $(this).val() + ']').attr('disabled', true);
            } else {
                $('.variable_priority option[value=' + $(this).val() + ']').removeAttr('disabled');
            }
        });
        if (totalSelectedValue() === totalValue()) {
            $('.selects').removeClass('invalid').addClass('valid');
        } else {
            $('.selects').removeClass('valid').addClass('invalid');
        }
    });
});

<script>$(document).ready(function() {
$('select').change(function() {
    $('option[value=' + $(this).val() + ']').attr('disabled', 'disabled');
});