JSFiddle - React, Tailwind, and code Playground

by Max Liashuk

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
Set value to second
<template v-for="checkbox in checkboxes">
  <div>
    <input type="radio" v-model="current" :id="checkbox.id" :value="checkbox.value" :disabled="checkbox.disabled">
    <label :for="checkbox.id">{{checkbox.id}}</label>
  </div>
</template>
<button @click="makeActive">Make second disabled</button>
<button @click="clear">Clear</button>

CSS

input[type="radio"]{
  display: none;
}

label{
  color: gray;
}
input[type="radio"]:checked ~ label{
  color: blue;
}
input[type="radio"]:disabled ~ label{
  color: red;
}

JavaScript

new Vue({
    el: 'body',
    data: {
     checkboxes: [
     		{id: 'chk1', value: '0', disabled: false},
        {id: 'chk2', value: '1', disabled: false},
        {id: 'chk3', value: '2', disabled: false},
        {id: 'chk4', value: '3', disabled: false}
     ],
     current: null
    },
    methods: {
    	clear: function(){
      	this.current = null;
      },
      makeActive: function(){
      	this.checkboxes[1]['disabled'] = !this.checkboxes[1]['disabled'];
      }
    }
})