將選中的複選框限制爲5個

Question

我有6個複選框，默認情況下會在加載時選中兩個複選框，並且在我想選擇更多複選框之後，但如果我嘗試選中所有複選框，它將顯示警報並且不可能選擇全部。意味着在每種情況下，它可以選擇一個或多達五個複選框。那麼我怎樣才能實現呢？

Answer 1

使用複選框組並對更改進行驗證。這裏有一個工作示例：

{ 
    xtype: 'checkboxgroup', 
    fieldLabel: 'Two Columns', 
    // Arrange checkboxes into two columns, distributed vertically 
    columns: 2, 
    vertical: true, 
    msgTarget: 'title', 
    listeners: { 
     change: function(cb,nv,ov) { 
      if(Ext.isArray(nv.rb)) { 
       if(nv.rb.length > 5){ 
        cb.markInvalid('You can select only 5!'); 
       } else { 
        cb.clearInvalid(); 
       } 
      } else { 
       cb.markInvalid('You need to select at least 2!'); 
      } 
     } 
    }, 
    items: [ 
     { boxLabel: 'Item 1', name: 'rb', inputValue: '1', checked: true }, 
     { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true }, 
     { boxLabel: 'Item 3', name: 'rb', inputValue: '3' }, 
     { boxLabel: 'Item 4', name: 'rb', inputValue: '4' }, 
     { boxLabel: 'Item 5', name: 'rb', inputValue: '5' }, 
     { boxLabel: 'Item 6', name: 'rb', inputValue: '6' } 
    ] 
}