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

}); 

由於這是該函數退出後它被摧毀的各項功能和價值的內部創建當你測試它不止一個時，它就不存在了。