fix(checkbox): make checkboxes non-editable (#184)

Author: d3m1d0v

.nvmrc

@@ -0,0 +1 @@
+14

src/transform/plugins/checkbox/checkbox.ts

@@ -48,6 +48,7 @@ export const checkboxReplace = function (_md: MarkdownIt, opts: CheckboxOptions)
         token.attrs = [
             ['type', 'checkbox'],
             ['id', id],
+            ['disabled', ''],
         ];
         if (checked === true) {
             token.attrs.push(['checked', 'true']);

test/checkbox.test.ts

@@ -29,7 +29,7 @@ describe('markdown-it-checkbox', function () {
             assert.equal(
                 res,
                 '<div class="checkbox">\n' +
-                    '<input type="checkbox" id="checkbox0" checked="true">\n' +
+                    '<input type="checkbox" id="checkbox0" disabled="" checked="true">\n' +
                     '<label for="checkbox0">test written</label>\n' +
                     '</div>\n',
             );
@@ -44,7 +44,7 @@ describe('markdown-it-checkbox', function () {
             assert.equal(
                 res,
                 '<div class="cb">\n' +
-                    '<input type="checkbox" id="checkbox0" checked="true">\n' +
+                    '<input type="checkbox" id="checkbox0" disabled="" checked="true">\n' +
                     '<label for="checkbox0">test written</label>\n' +
                     '</div>\n',
             );
@@ -59,7 +59,7 @@ describe('markdown-it-checkbox', function () {
             assert.equal(
                 res,
                 '<div class="checkbox">\n' +
-                    '<input type="checkbox" id="cb0" checked="true">\n' +
+                    '<input type="checkbox" id="cb0" disabled="" checked="true">\n' +
                     '<label for="cb0">test written</label>\n' +
                     '</div>\n',
             );

test/data/checkbox/checkbox.txt

@@ -2,7 +2,7 @@
 [ ] unchecked
 .
 <div class="checkbox">
-<input type="checkbox" id="checkbox0">
+<input type="checkbox" id="checkbox0" disabled="">
 <label for="checkbox0">unchecked</label>
 </div>
 .
@@ -11,7 +11,7 @@
 [_] unchecked
 .
 <div class="checkbox">
-<input type="checkbox" id="checkbox1">
+<input type="checkbox" id="checkbox1" disabled="">
 <label for="checkbox1">unchecked</label>
 </div>
 .
@@ -20,7 +20,7 @@
 [x] checked
 .
 <div class="checkbox">
-<input type="checkbox" id="checkbox2" checked="true">
+<input type="checkbox" id="checkbox2" disabled="" checked="true">
 <label for="checkbox2">checked</label>
 </div>
 .
@@ -29,7 +29,7 @@
 [X] checked
 .
 <div class="checkbox">
-<input type="checkbox" id="checkbox3" checked="true">
+<input type="checkbox" id="checkbox3" disabled="" checked="true">
 <label for="checkbox3">checked</label>
 </div>
 .
@@ -41,13 +41,13 @@
 <ul>
 <li>
 <div class="checkbox">
-<input type="checkbox" id="checkbox4">
+<input type="checkbox" id="checkbox4" disabled="">
 <label for="checkbox4">unchecked</label>
 </div>
 </li>
 <li>
 <div class="checkbox">
-<input type="checkbox" id="checkbox5" checked="true">
+<input type="checkbox" id="checkbox5" disabled="" checked="true">
 <label for="checkbox5">checked</label>
 </div>
 </li>