まだinputに一々disabledかけている？

フォーム送信中にinput要素やbutton要素をdisableにしてデータが帰って来たら有効に戻すというのは多分よくやっていると思いますが、fieldset 要素一つで一括でdisabledにできる方法を最近知ったので、シェアしておきたいと思います。

普段👇

<div>
  <input disabled={loading} type="email" name="name" />
</div>

<div>
  <input disabled={loading} type="password" name="password" />
</div>

<div>
  <input disabled={loading} type="submit" value="submit" name="button" />
</div>

fieldset使った場合👇

<fieldset disabled={loading}>
	<div>
	  <input type="email" name="name" />
	</div>

	<div>
	  <input type="password" name="password" />
	</div>

	<div>
	  <input type="submit" value="submit" name="button" />
	</div>
</fieldset>

demo