JSFiddle - React, Tailwind, and code Playground

by nimareq

HTML

<fieldset id="register-buttons" disabled>register</fieldset>
<fieldset id="login-buttons">login</fieldset>

<button onClick='toggle()'>
toggle
</button>

<button onClick='cd()'>
cd
</button>

CSS

#register-buttons,
#login-buttons {
  border: 1px solid green;
}

#register-buttons:disabled,
#login-buttons:disabled {
  border-color: red;
}

JavaScript

var $ = document.querySelector.bind(document)
var bool = true

function toggle() {
  bool = !bool
    
  $('#register-buttons').disabled = bool
  $('#login-buttons').disabled = bool

  if (bool) {
    $('#login-buttons').setAttribute('disabled', '')
  } else {
    $('#login-buttons').removeAttribute('disabled')
  }

  console.log(bool, [$('#login-buttons:disabled'), $('#register-buttons:disabled')])
}