Don't set read-only class if readonly is null

addon/mixins/checkbox.js

@@ -20,7 +20,7 @@ var CheckboxMixin = Ember.Mixin.create(Base, {
       settings.onChange = this.get('_onChange');
     }
     if (this._hasOwnProperty(this.attrs, 'readonly') || this.get('readonly') != null) {
-      this.$().toggleClass('read-only', this.get('readonly'));
+      this.$().toggleClass('read-only', Boolean(this.get('readonly')));
     }
   },
 
@@ -83,7 +83,7 @@ var CheckboxMixin = Ember.Mixin.create(Base, {
     // Handle readonly
     if (attrName === 'readonly') {
       // We need to add a class verses updating the property, since semantic is caching the value internall
-      return this.$().toggleClass('read-only', attrValue);
+      return this.$().toggleClass('read-only', Boolean(attrValue));
     }
     // Default
     return this._super(...arguments);

tests/integration/components/ui-checkbox-test.js

@@ -90,4 +90,25 @@ test('setting readonly ignores click', function(assert) {
   this.$('.ui.checkbox').click();
   assert.equal(true, this.get('checked'));
   assert.equal(count, 1, 'onChange should have only been called once');
-});
+});
+
+test('setting readonly to null allows click', function(assert) {
+  assert.expect(3);
+
+  let count = 0;
+  this.set('changed', (value) => {
+    this.set('checked', value);
+    count++;
+  });
+
+  this.set('checked', false);
+  this.set('readonly', null);
+  this.render(hbs`
+    {{ui-checkbox label="Make my profile visible" checked=checked readonly=readonly onChange=(action changed)}}
+  `);
+
+  assert.equal(this.$('.ui.checkbox').length, 1);
+  this.$('.ui.checkbox').click();
+  assert.equal(true, this.get('checked'));
+  assert.equal(count, 1, 'onChange should have only been called once');
+});

tests/integration/components/ui-radio-test.js

@@ -216,6 +216,42 @@ test('setting readonly ignores click', function(assert) {
   assert.equal(count, 1, 'onChange should have been called only once');
 });
 
+test('setting readonly to null allows click', function(assert) {
+  assert.expect(4);
+
+  let count = 0;
+  this.set('changed', (value) => {
+    this.set('frequency', value);
+    count++;
+  });
+
+  this.set('checked', false);
+  this.set('readonly', null);
+  this.set('frequency', 'weekly');
+  this.render(hbs`
+    <div class="ui form">
+      <div class="grouped inline fields">
+        <div class="field">
+          {{ui-radio name="frequency" label="Once a week" value='weekly' current=frequency onChange=(action changed)}}
+        </div>
+        <div class="field">
+          {{ui-radio name="frequency" label="2-3 times a week" value='biweekly' current=frequency readonly=readonly onChange=(action changed)}}
+        </div>
+        <div class="field">
+          {{ui-radio name="frequency" label="Once a day" value='daily' current=frequency onChange=(action changed)}}
+        </div>
+      </div>
+    </div>
+  `);
+
+  assert.equal(this.$('.ui.radio').length, 3);
+  this.$('.ui.radio')[1].click();
+
+  assert.equal('biweekly', this.get('frequency'));
+  assert.ok(this.$(this.$('.ui.radio')[1]).hasClass('checked'));
+  assert.equal(count, 1, 'onChange should have been called only once');
+});
+
 test('setting binded value updates to current', function(assert) {
   assert.expect(7);