diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js
index 39fdcb585..75a10ab87 100644
--- a/apps/common/main/lib/component/RadioBox.js
+++ b/apps/common/main/lib/component/RadioBox.js
@@ -71,7 +71,8 @@ define([
disabled : false,
rendered : false,
- template : _.template(''),
+ template : _.template(''),
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
@@ -96,11 +97,12 @@ define([
var el = this.$el || $(this.el);
el.html(this.template({
labelText: this.options.labelText,
- name: this.name
+ name: this.name,
+ id: Common.UI.getId('rdb-')
}));
- this.$radio = el.find('input[type=button]');
- this.$label = el.find('label');
+ this.$radio = el.find('input[type=radio]');
+ this.$label = el.find('label.radiobox');
this.rendered = true;
return this;
@@ -129,8 +131,7 @@ define([
setRawValue: function(value) {
var value = (value === true || value === 'true' || value === '1' || value === 1 );
- $('input[type=button][name=' + this.name + ']').removeClass('checked');
- this.$radio.toggleClass('checked', value);
+ this.$radio.prop('checked', value);
},
setValue: function(value, suspendchange) {
@@ -138,7 +139,7 @@ define([
var lastValue = this.$radio.hasClass('checked');
this.setRawValue(value);
if (suspendchange !== true && lastValue !== value)
- this.trigger('change', this, this.$radio.hasClass('checked'));
+ this.trigger('change', this, this.$radio.is(':checked'));
} else {
this.options.checked = value;
}
diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
index e356a52cd..c95c3657f 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -4,22 +4,27 @@
.font-size-normal();
font-weight: normal;
position: relative;
+ min-height: 1em;
- input[type=button] {
- margin-left: -22px;
- margin-right: 6px;
- padding-bottom: 4px;
- width: 14px;
- height: 14px;
- cursor: default;
- vertical-align: top;
+ input[type=radio] {
- background: #fff;
- border: 1px solid @gray;
- border-radius: 50%;
+ display: none;
- &.checked {
- + span {
+ + label {
+ position: absolute;
+ left: 0;
+ margin-top: auto;
+ padding-bottom: 4px;
+ width: 14px;
+ height: 14px;
+
+ background: #fff;
+ border: 1px solid @gray;
+ border-radius: 50%;
+ }
+
+ &:checked {
+ + label {
&::before {
content: '';
position: absolute;
@@ -27,16 +32,16 @@
border-radius: 50%;
width: 8px;
height: 8px;
- left: 3px;
- top: 3px;
+ left: 2px;
+ top: 2px;
}
}
}
- &.disabled {
+ &.disabled, &:disabled {
opacity: .4;
- + span {
+ + label {
&::before {
opacity: .4;
}