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',
59 // checkbox success does not make any sense really..
64 getAutoCreate : function()
66 var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
72 cfg.cls = 'form-group form-check ' + this.inputType; //input-group
75 cfg.cls += ' ' + this.inputType + '-inline form-check-inline';
81 type : this.inputType,
82 value : this.inputValue,
83 cls : 'roo-' + this.inputType, //'form-box',
84 placeholder : this.placeholder || ''
88 if(this.inputType != 'radio'){
92 cls : 'roo-hidden-value',
93 value : this.checked ? this.inputValue : this.valueOff
98 if (this.weight) { // Validity check?
99 cfg.cls += " " + this.inputType + "-" + this.weight;
107 input.checked = this.checked;
112 input.name = this.name;
114 if(this.inputType != 'radio'){
115 hidden.name = this.name;
116 input.name = '_hidden_' + this.name;
121 input.cls += ' input-' + this.size;
126 ['xs','sm','md','lg'].map(function(size){
127 if (settings[size]) {
128 cfg.cls += ' col-' + size + '-' + settings[size];
132 var inputblock = input;
134 if (this.before || this.after) {
144 cls : 'input-group-addon',
149 inputblock.cn.push(input);
151 if(this.inputType != 'radio'){
152 inputblock.cn.push(hidden);
158 cls : 'input-group-addon',
164 var boxLabelCfg = false;
170 //'for': id, // box label is handled by onclick - so no for...
175 boxLabelCfg.tooltip = this.tooltip;
181 if (align ==='left' && this.fieldLabel.length) {
182 // Roo.log("left and has label");
187 cls : 'control-label',
188 html : this.fieldLabel
199 cfg.cn[1].cn.push(boxLabelCfg);
202 if(this.labelWidth > 12){
203 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
206 if(this.labelWidth < 13 && this.labelmd == 0){
207 this.labelmd = this.labelWidth;
210 if(this.labellg > 0){
211 cfg.cn[0].cls += ' col-lg-' + this.labellg;
212 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
215 if(this.labelmd > 0){
216 cfg.cn[0].cls += ' col-md-' + this.labelmd;
217 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
220 if(this.labelsm > 0){
221 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
222 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
225 if(this.labelxs > 0){
226 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
227 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
230 } else if ( this.fieldLabel.length) {
231 // Roo.log(" label");
235 tag: this.boxLabel ? 'span' : 'label',
237 cls: 'control-label box-input-label',
238 //cls : 'input-group-addon',
239 html : this.fieldLabel
246 cfg.cn.push(boxLabelCfg);
251 // Roo.log(" no label && no align");
252 cfg.cn = [ inputblock ] ;
254 cfg.cn.push(boxLabelCfg);
262 if(this.inputType != 'radio'){
271 * return the real input element.
275 return this.el.select('input.roo-' + this.inputType,true).first();
277 hiddenEl: function ()
279 return this.el.select('input.roo-hidden-value',true).first();
284 return this.el.select('label.control-label',true).first();
290 return this.labelEl();
293 boxLabelEl: function()
295 return this.el.select('label.box-label',true).first();
298 initEvents : function()
300 // Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
302 this.inputEl().on('click', this.onClick, this);
305 this.el.select('label.box-label',true).first().on('click', this.onClick, this);
308 this.startValue = this.getValue();
311 Roo.bootstrap.CheckBox.register(this);
315 onClick : function(e)
317 if(this.fireEvent('click', this, e) !== false){
318 this.setChecked(!this.checked);
323 setChecked : function(state,suppressEvent)
325 this.startValue = this.getValue();
327 if(this.inputType == 'radio'){
329 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
330 e.dom.checked = false;
333 this.inputEl().dom.checked = true;
335 this.inputEl().dom.value = this.inputValue;
337 if(suppressEvent !== true){
338 this.fireEvent('check', this, true);
346 this.checked = state;
348 this.inputEl().dom.checked = state;
351 this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff;
353 if(suppressEvent !== true){
354 this.fireEvent('check', this, state);
360 getValue : function()
362 if(this.inputType == 'radio'){
363 return this.getGroupValue();
366 return this.hiddenEl().dom.value;
370 getGroupValue : function()
372 if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
376 return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
379 setValue : function(v,suppressEvent)
381 if(this.inputType == 'radio'){
382 this.setGroupValue(v, suppressEvent);
386 this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
391 setGroupValue : function(v, suppressEvent)
393 this.startValue = this.getValue();
395 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
396 e.dom.checked = false;
398 if(e.dom.value == v){
399 e.dom.checked = true;
403 if(suppressEvent !== true){
404 this.fireEvent('check', this, true);
412 validate : function()
414 if(this.getVisibilityEl().hasClass('hidden')){
420 (this.inputType == 'radio' && this.validateRadio()) ||
421 (this.inputType == 'checkbox' && this.validateCheckbox())
431 validateRadio : function()
433 if(this.getVisibilityEl().hasClass('hidden')){
443 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
456 validateCheckbox : function()
459 return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
460 //return (this.getValue() == this.inputValue) ? true : false;
463 var group = Roo.bootstrap.CheckBox.get(this.groupId);
472 if(group[i].el.isVisible(true)){
485 r = (group[i].getValue() == group[i].inputValue) ? true : false;
492 * Mark this field as valid
494 markValid : function()
498 this.fireEvent('valid', this);
500 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
503 label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
510 if(this.inputType == 'radio'){
511 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
512 var fg = e.findParent('.form-group', false, true);
513 if (Roo.bootstrap.version == 3) {
514 fg.removeClass([_this.invalidClass, _this.validClass]);
515 fg.addClass(_this.validClass);
517 fg.removeClass(['is-valid', 'is-invalid']);
518 fg.addClass('is-valid');
526 var fg = this.el.findParent('.form-group', false, true);
527 if (Roo.bootstrap.version == 3) {
528 fg.removeClass([this.invalidClass, this.validClass]);
529 fg.addClass(this.validClass);
531 fg.removeClass(['is-valid', 'is-invalid']);
532 fg.addClass('is-valid');
537 var group = Roo.bootstrap.CheckBox.get(this.groupId);
544 var fg = group[i].el.findParent('.form-group', false, true);
545 if (Roo.bootstrap.version == 3) {
546 fg.removeClass([this.invalidClass, this.validClass]);
547 fg.addClass(this.validClass);
549 fg.removeClass(['is-valid', 'is-invalid']);
550 fg.addClass('is-valid');
556 * Mark this field as invalid
557 * @param {String} msg The validation message
559 markInvalid : function(msg)
567 this.fireEvent('invalid', this, msg);
569 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
572 label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
579 if(this.inputType == 'radio'){
581 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
582 var fg = e.findParent('.form-group', false, true);
583 if (Roo.bootstrap.version == 3) {
584 fg.removeClass([_this.invalidClass, _this.validClass]);
585 fg.addClass(_this.invalidClass);
587 fg.removeClass(['is-invalid', 'is-valid']);
588 fg.addClass('is-invalid');
596 var fg = this.el.findParent('.form-group', false, true);
597 if (Roo.bootstrap.version == 3) {
598 fg.removeClass([_this.invalidClass, _this.validClass]);
599 fg.addClass(_this.invalidClass);
601 fg.removeClass(['is-invalid', 'is-valid']);
602 fg.addClass('is-invalid');
607 var group = Roo.bootstrap.CheckBox.get(this.groupId);
614 var fg = group[i].el.findParent('.form-group', false, true);
615 if (Roo.bootstrap.version == 3) {
616 fg.removeClass([_this.invalidClass, _this.validClass]);
617 fg.addClass(_this.invalidClass);
619 fg.removeClass(['is-invalid', 'is-valid']);
620 fg.addClass('is-invalid');
626 clearInvalid : function()
628 Roo.bootstrap.Input.prototype.clearInvalid.call(this);
630 // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
632 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
634 if (label && label.iconEl) {
635 label.iconEl.removeClass([ label.validClass, label.invalidClass ]);
636 label.iconEl.removeClass(['is-invalid', 'is-valid']);
642 if(this.inputType != 'radio'){
643 Roo.bootstrap.CheckBox.superclass.disable.call(this);
650 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
651 _this.getActionEl().addClass(this.disabledClass);
652 e.dom.disabled = true;
656 this.disabled = true;
657 this.fireEvent("disable", this);
663 if(this.inputType != 'radio'){
664 Roo.bootstrap.CheckBox.superclass.enable.call(this);
671 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
672 _this.getActionEl().removeClass(this.disabledClass);
673 e.dom.disabled = false;
677 this.disabled = false;
678 this.fireEvent("enable", this);
682 setBoxLabel : function(v)
687 this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
693 Roo.apply(Roo.bootstrap.CheckBox, {
698 * register a CheckBox Group
699 * @param {Roo.bootstrap.CheckBox} the CheckBox to add
701 register : function(checkbox)
703 if(typeof(this.groups[checkbox.groupId]) == 'undefined'){
704 this.groups[checkbox.groupId] = {};
707 if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){
711 this.groups[checkbox.groupId][checkbox.name] = checkbox;
715 * fetch a CheckBox Group based on the group ID
716 * @param {string} the group ID
717 * @returns {Roo.bootstrap.CheckBox} the CheckBox group
719 get: function(groupId) {
720 if (typeof(this.groups[groupId]) == 'undefined') {
724 return this.groups[groupId] ;