diff --git a/addon/mixins/checkbox.js b/addon/mixins/checkbox.js
index 39fc84c5c..5538b854c 100644
--- a/addon/mixins/checkbox.js
+++ b/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);
diff --git a/tests/integration/components/ui-checkbox-test.js b/tests/integration/components/ui-checkbox-test.js
index c0d3d0c20..77e8010a1 100644
--- a/tests/integration/components/ui-checkbox-test.js
+++ b/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');
-});
\ No newline at end of file
+});
+
+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');
+});
diff --git a/tests/integration/components/ui-radio-test.js b/tests/integration/components/ui-radio-test.js
index ccfbaaf09..58d0c029f 100644
--- a/tests/integration/components/ui-radio-test.js
+++ b/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);