jquery - jQuery 验证 - 在 3 个选择框之间仅选择一个选项

Question

再会

我有 3 个选择框。现在我想做的是允许用户只在其中一个框中选择一个值，但不能超过一个框。这些盒子可能都是空的。

因此，您可以选择以下之一以使提交成功：

无 (---) 或 1/2 /3 或蓝色/绿色/紫色或大/中/小

<select>
      <option>---</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <br /><br />
    <select>
      <option>---</option>
      <option>Blue</option>
      <option>Green</option>
      <option>Purple</option>
    </select>
    <br /><br />
    <select>
      <option>---</option>
      <option>Big</option>
      <option>Medium</option>
      <option>Small</option>
    </select>
    <br /><br />
    <input type="submit" />

jQuery

$('input[type="submit"]').click(function(){

$('select').each(function() {
     var i = 0;
     if($(this).attr('option','selected').val() != "---"){
        i++;
     };
  });

if(i > 1){
        $('input[type="submit"]').prop('disabled', true);
        alert('You can only choose one option!');
}
else {
        alert('Form Submitted successfully');
}

});

但这根本不起作用。

见我的JSFiddle

Answer 1

定义您的ibeforeeach函数以使其在您的click函数内具有全局范围并在if条件下可访问：

var i = 0;
$('select').each(function() {

更新小提琴

Answer 2

你的意思是：

http://jsfiddle.net/2DzUV/18/

 $('select').on('change', function () {
        $('select').not(this).val("");
    });

Answer 3

i那是因为在遍历<select>元素列表时正在重置变量的范围。将第 4var i = 0;行移至第 2 行，即在嵌套循环之外。

Answer 4

您需要将变量 i 的创建移到每个函数之外，如下所示：

$('input[type="submit"]').click(function(){

var i = 0; // <-- this was moved to here
$('select').each(function() {
     if($(this).attr('option','selected').val() != "---"){
        i++;
     };
  });

if(i > 1){
        $('input[type="submit"]').prop('disabled', true);
        alert('You can only choose one option!');
}
else {
        alert('Form Submitted successfully');
}

});

由于它是在每个函数内部创建的，因此在该函数退出后它会被销毁，并且当您测试它是否大于一时该值不再存在。