Webのラジオボタンでchangeイベントが複数回発火しない件について

HTMLで作成したラジオボタンのchangeイベントが同じボタン上で2回目以降発火しない現象に見舞われた。

ブラウザはChrome 71。Bootstrap 3を使っている。

見た目はこんな感じ。

HTMLコードはこんな感じ。

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="radio" autocomplete="off" value="value1"> あああ
	</label>
	<label class="btn btn-primary">
		<input type="radio" autocomplete="off" value="value2"> いいい
	</label>
	<label class="btn btn-primary">
		<input type="radio" autocomplete="off" value="value3"> ううう
	</label>
</div>

すぐに気づいた人は多いと思う。

input要素にname属性を付加していないのだ ／(^o^)＼

「ラジオボタンに付けるname属性って、ラジオボタンのグループをつくるのに必要なんだろうな」くらいにしか考えていなかったんだけど、とんでもない。

name属性を付けないとそもそもコントロールとして機能しない。

さっきのコードにname属性を付けたものがこちら↓

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="radio" name="group_name" autocomplete="off" value="value1"> あああ
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="group_name" autocomplete="off" value="value2"> いいい
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="group_name" autocomplete="off" value="value3"> ううう
	</label>
</div>

これで上手くラジオボタンとして機能するようになった。

changeイベントも何回でも発火するようになった。