input 체크박스 활성화여부에 따른 엘리먼트 제어하기

$(".lst_prd li input").on('click', function(e) {
	var target = $(this).next().next('.prd_amount');

	if(this.checked){
		target.removeClass('prd_dimmed');

		target.find('span.sp_com').replaceWith(function() {
			return $('<a>').attr('class', $(this).attr('class')).text($(this).text());
		})
	} else {
		target.addClass('prd_dimmed');

		target.find('a.sp_com').replaceWith(function() {
			return $('<span>').attr('class', $(this).attr('class')).text($(this).text());
		})
	}
});

.replaceWith() - 어떤 값을 바꿔주고자 할 때 사용

.attr()

 - 인자가 몇 개인가에 따라서 2가지로 사용이 가능. 

    하나의 인자만 있을 경우 그 인자의 해당하는 값을 가져오고, 두 개의 인자가 있을 경우 속성값을 부여함.

    ex) ("속성","값") = ("href","#") = ("class","header")

인풋에 체크가 되어있는 경우에는 .replaceWith()에 따라 a태그를 삽입하고 클래스와 텍스트는 있는 그대로 유지.

인풋에 체크가 되어있지 않은 경우에는 <span>태그를 삽입하고 클래스와 텍스트는 있는 그대로 유지.