9 * @class Roo.bootstrap.CheckBox
10 * @extends Roo.bootstrap.Input
11 * Bootstrap CheckBox class
13 * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
14 * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
15 * @cfg {String} boxLabel The text that appears beside the checkbox
16 * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
17 * @cfg {Boolean} checked initnal the element
18 * @cfg {Boolean} inline inline the element (default false)
19 * @cfg {String} groupId the checkbox group id // normal just use for checkbox
20 * @cfg {String} tooltip label tooltip
23 * Create a new CheckBox
24 * @param {Object} config The config object
27 Roo.bootstrap.CheckBox = function(config){
28 Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
33 * Fires when the element is checked or unchecked.
34 * @param {Roo.bootstrap.CheckBox} this This input
35 * @param {Boolean} checked The new checked value
40 * Fires when the element is click.
41 * @param {Roo.bootstrap.CheckBox} this This input
48 Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, {
50 inputType: 'checkbox',
58 useFontAwesome : false,
60 getAutoCreate : function()
62 var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
68 cfg.cls = 'form-group ' + this.inputType; //input-group
71 cfg.cls += ' ' + this.inputType + '-inline';
77 type : this.inputType,
78 value : this.inputValue,
79 cls : 'roo-' + this.inputType, //'form-box',
80 placeholder : this.placeholder || ''
84 if(this.inputType != 'radio'){
88 cls : 'roo-hidden-value',
89 value : this.checked ? this.inputValue : this.valueOff
94 if (this.weight) { // Validity check?
95 cfg.cls += " " + this.inputType + "-" + this.weight;
103 input.checked = this.checked;
108 input.name = this.name;
110 if(this.inputType != 'radio'){
111 hidden.name = this.name;
112 input.name = '_hidden_' + this.name;
117 input.cls += ' input-' + this.size;
122 ['xs','sm','md','lg'].map(function(size){
123 if (settings[size]) {
124 cfg.cls += ' col-' + size + '-' + settings[size];
128 var inputblock = input;
130 if (this.before || this.after) {
140 cls : 'input-group-addon',
145 inputblock.cn.push(input);
147 if(this.inputType != 'radio'){
148 inputblock.cn.push(hidden);
154 cls : 'input-group-addon',
161 if (align ==='left' && this.fieldLabel.length) {
162 // Roo.log("left and has label");
167 cls : 'control-label',
168 html : this.fieldLabel
178 if(this.labelWidth > 12){
179 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
182 if(this.labelWidth < 13 && this.labelmd == 0){
183 this.labelmd = this.labelWidth;
186 if(this.labellg > 0){
187 cfg.cn[0].cls += ' col-lg-' + this.labellg;
188 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
191 if(this.labelmd > 0){
192 cfg.cn[0].cls += ' col-md-' + this.labelmd;
193 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
196 if(this.labelsm > 0){
197 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
198 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
201 if(this.labelxs > 0){
202 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
203 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
206 } else if ( this.fieldLabel.length) {
207 // Roo.log(" label");
211 tag: this.boxLabel ? 'span' : 'label',
213 cls: 'control-label box-input-label',
214 //cls : 'input-group-addon',
215 html : this.fieldLabel
224 // Roo.log(" no label && no align");
225 cfg.cn = [ inputblock ] ;
233 //'for': id, // box label is handled by onclick - so no for...
239 boxLabelCfg.tooltip = this.tooltip;
242 cfg.cn.push(boxLabelCfg);
245 if(this.inputType != 'radio'){
254 * return the real input element.
258 return this.el.select('input.roo-' + this.inputType,true).first();
260 hiddenEl: function ()
262 return this.el.select('input.roo-hidden-value',true).first();
267 return this.el.select('label.control-label',true).first();
273 return this.labelEl();
276 boxLabelEl: function()
278 return this.el.select('label.box-label',true).first();
281 initEvents : function()
283 // Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
285 this.inputEl().on('click', this.onClick, this);
288 this.el.select('label.box-label',true).first().on('click', this.onClick, this);
291 this.startValue = this.getValue();
294 Roo.bootstrap.CheckBox.register(this);
298 onClick : function(e)
300 if(this.fireEvent('click', this, e) !== false){
301 this.setChecked(!this.checked);
306 setChecked : function(state,suppressEvent)
308 this.startValue = this.getValue();
310 if(this.inputType == 'radio'){
312 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
313 e.dom.checked = false;
316 this.inputEl().dom.checked = true;
318 this.inputEl().dom.value = this.inputValue;
320 if(suppressEvent !== true){
321 this.fireEvent('check', this, true);
329 this.checked = state;
331 this.inputEl().dom.checked = state;
334 this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff;
336 if(suppressEvent !== true){
337 this.fireEvent('check', this, state);
343 getValue : function()
345 if(this.inputType == 'radio'){
346 return this.getGroupValue();
349 return this.hiddenEl().dom.value;
353 getGroupValue : function()
355 if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
359 return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
362 setValue : function(v,suppressEvent)
364 if(this.inputType == 'radio'){
365 this.setGroupValue(v, suppressEvent);
369 this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
374 setGroupValue : function(v, suppressEvent)
376 this.startValue = this.getValue();
378 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
379 e.dom.checked = false;
381 if(e.dom.value == v){
382 e.dom.checked = true;
386 if(suppressEvent !== true){
387 this.fireEvent('check', this, true);
395 validate : function()
397 if(this.getVisibilityEl().hasClass('hidden')){
403 (this.inputType == 'radio' && this.validateRadio()) ||
404 (this.inputType == 'checkbox' && this.validateCheckbox())
414 validateRadio : function()
416 if(this.getVisibilityEl().hasClass('hidden')){
426 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
439 validateCheckbox : function()
442 return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
443 //return (this.getValue() == this.inputValue) ? true : false;
446 var group = Roo.bootstrap.CheckBox.get(this.groupId);
455 if(group[i].el.isVisible(true)){
468 r = (group[i].getValue() == group[i].inputValue) ? true : false;
475 * Mark this field as valid
477 markValid : function()
481 this.fireEvent('valid', this);
483 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
486 label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
493 if(this.inputType == 'radio'){
494 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
495 e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]);
496 e.findParent('.form-group', false, true).addClass(_this.validClass);
503 this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
504 this.el.findParent('.form-group', false, true).addClass(this.validClass);
508 var group = Roo.bootstrap.CheckBox.get(this.groupId);
515 group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
516 group[i].el.findParent('.form-group', false, true).addClass(this.validClass);
521 * Mark this field as invalid
522 * @param {String} msg The validation message
524 markInvalid : function(msg)
532 this.fireEvent('invalid', this, msg);
534 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
537 label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
544 if(this.inputType == 'radio'){
545 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
546 e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]);
547 e.findParent('.form-group', false, true).addClass(_this.invalidClass);
554 this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
555 this.el.findParent('.form-group', false, true).addClass(this.invalidClass);
559 var group = Roo.bootstrap.CheckBox.get(this.groupId);
566 group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
567 group[i].el.findParent('.form-group', false, true).addClass(this.invalidClass);
572 clearInvalid : function()
574 Roo.bootstrap.Input.prototype.clearInvalid.call(this);
576 // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
578 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
580 if (label && label.iconEl) {
581 label.iconEl.removeClass(label.validClass);
582 label.iconEl.removeClass(label.invalidClass);
588 if(this.inputType != 'radio'){
589 Roo.bootstrap.CheckBox.superclass.disable.call(this);
596 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
597 _this.getActionEl().addClass(this.disabledClass);
598 e.dom.disabled = true;
602 this.disabled = true;
603 this.fireEvent("disable", this);
609 if(this.inputType != 'radio'){
610 Roo.bootstrap.CheckBox.superclass.enable.call(this);
617 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
618 _this.getActionEl().removeClass(this.disabledClass);
619 e.dom.disabled = false;
623 this.disabled = false;
624 this.fireEvent("enable", this);
628 setBoxLabel : function(v)
633 this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
639 Roo.apply(Roo.bootstrap.CheckBox, {
644 * register a CheckBox Group
645 * @param {Roo.bootstrap.CheckBox} the CheckBox to add
647 register : function(checkbox)
649 if(typeof(this.groups[checkbox.groupId]) == 'undefined'){
650 this.groups[checkbox.groupId] = {};
653 if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){
657 this.groups[checkbox.groupId][checkbox.name] = checkbox;
661 * fetch a CheckBox Group based on the group ID
662 * @param {string} the group ID
663 * @returns {Roo.bootstrap.CheckBox} the CheckBox group
665 get: function(groupId) {
666 if (typeof(this.groups[groupId]) == 'undefined') {
670 return this.groups[groupId] ;