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

Question

美好的一天

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

所以哟可以有以下选择之一，让提交成功：

无（---） OR 1/2/3 OR 蓝/绿/紫 或 大/中/小

<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

你有没有意思是说：

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

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

Answer 2

定义您i之前each功能，让它成为click函数内部全局范围和可访问在if条件：

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

Updated Fiddle

Answer 3

，这是因为可变i的范围正在通过<select>元素列表进行迭代时复位。将第4行var i = 0;移至第2行，即在嵌套循环之外。

Answer 4

你需要我以外每个功能的移动变量的创建，如下图所示：

$('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'); 
} 

}); 

由于这是该函数退出后它被摧毁的各项功能和价值的内部创建当你测试它不止一个时，它就不存在了。