【jQuery】IE8でinputのchangeが効かないときの対処法

IEは本当にやっかいだ。
以下の方法で解決できたので、よかった。

HTML

index.html

<ul class="radio">
  <li><label><input type="radio" name="bloodtype" value="A" checked />A</label></li>
  <li><label><input type="radio" name="bloodtype" value="B" />B</label></li>
  <li><label><input type="radio" name="bloodtype" value="O" />O</label></li>
  <li><label><input type="radio" name="bloodtype" value="AB" />AB</label></li>
</ul>

jQuery

jquery.js

$(".radio").change(function(){
	$(".radio label").removeClass("radio-checked");
	$(this).parent("label").addClass("radio-checked");
});

//IE8用
$(".radio input").closest("label").on("click", function(e){
	var input = $(this).find("input");
	if(! input.prop("checked")){
	  input.prop("checked", true).trigger("change");
	}
});

• ラジオボタンでグラフィカルなトグルボタンを作ってみる