JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div id="app">
  <div>

    <form id="frm1">

      <label><input value="a" id="rd1" v-model="radio" name="test2" type="radio" :disabled="isDisabled" v-clear-on-disable>Option 1</label>
      <label><input value="b" id="rd2" v-model="radio" name="test2" type="radio" :disabled="isDisabled" v-clear-on-disable>Option 2</label>
      <label><input value="c" id="rd3" :checked="rd3Check" v-model="radio" name="test2" type="radio" :disabled="isDisabled" v-clear-on-disable>Option 3</label>


    </form>

    <p>
      <button @click="isDisabled = !isDisabled">toggle</button>
      Selected : {{ radio }}
    </p>


  </div>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

function inserted(element, dir, vnode) {
  // Create a new MutationObserver to watch the HTMLElement for changes
  new MutationObserver(function(mutations) {
      // Loop through all mutations once the callback is called
      mutations.forEach(function(mutation) {
          var target = mutation.target;

          // Check if the mutation is a disabled change and if the target is now disabled
          if (mutation.attributeName === 'disabled' && target.disabled) {
            // Check for the kind of HTMLElement, clear it's value and trigger a input or change event
            switch (target.tagName) {
              case 'INPUT':
                switch (target.type) {
                  case 'text':
                    target.value = '';
                    target.dispatchEvent(new CustomEvent('input'));
                    break;

                  case 'checkbox':
                    target.checked = false;
                    target.dispatchEvent(new CustomEvent('change'));
                    break;
                  case 'radio':
                    if (target.checked) {
                      target.checked = false;

                      // clear model 
                      if (vnode.props?.["onUpdate:modelValue"]) {
                          //  vue 3
                          vnode.props["onUpdate:modelValue"]()
                        } else {
                          // vue 2
                          const vModel = vnode.data.directives.find(directive => directive.rawName === 'v-model');
                          vnode.context.$set(vnode.context, vModel.expression, '');
                        }
                      }
                      break;
                    }
                    break;

                  case 'SELECT':
                    target.value = '';
                    target.dispatchEvent(new CustomEvent('change'));
                    break;

                  case 'TEXTAREA':
                    target.value = '';
             ...