[JQuery/Javascript] 동적으로 생성한 input : radio 값 변경 막기 (클릭 이벤트 처리)

3개의 라디오 버튼 중 1개만 선택하여 값을 보내고 싶은 상황이다.

<input class="radio" type="radio" name="fruits" value="apple" checked/>
<input class="radio" type="radio" name="fruits" value="orange"/>
<input class="radio" type="radio" name="fruits" value="banana"/>

특정 사용자만 radio값을 변경할 수 있는 상황이었다.

그래서 그 외 사용자에게는 radio 컴포넌트의 값을 수정할 수 없게 하려고 하였다.

<input type="radio"/>는 disabled 속성을 이용하여 값을 변경할 수 없도록 고정할 수 있다.

 

하지만...... disabled 속성을 사용하면 두가지 단점이 있다.

1. Form 안에 넣어서 submit을 할 때 값이 전달되지 않는다.

2. 사용불가능한 상태라서 라디오 버튼의 컬러가 어두운 회색이 된다.

 

나는 2번의 이유로(라디오 버튼의 값을 변경하지는 못하지만, 컬러는 어두워지지 않길 원함)

disabled 속성이 아닌 click 이벤트로 처리를 하였다.

 

일단은 두 가지 방법 모두 소개하려고 한다.

 

▶ radio value 못바꾸게 막기

1.태그 생성시 막기

1-1. disabled 속성 사용하여 값 변경 막기

<input class="radio" type="radio" name="fruits" value="apple" disabled="disabled" checked/>
<input class="radio" type="radio" name="fruits" value="orange" disabled="disabled"/>
<input class="radio" type="radio" name="fruits" value="banana" disabled="disabled"/>

1-2. click 이벤트로 값 변경 막기

<input class="radio" type="radio" name="fruits" value="apple" onclick="return(false);" checked>
<input class="radio" type="radio" name="fruits" value="orange" onclick="return(false);">
<input class="radio" type="radio" name="fruits" value="banana" onclick="return(false);">

2. JQurey로 스크립트 써서 막기

2-1. disabled 속성 사용하여 값 변경 막기

if(!activeUser){ // 현 사용자의 페이지가 아니면
	$(".radio").attr('disabled', 'disabled');
	//$(".radio").attr('disabled', true); //<= 이것도 가능하다.
}

2-2. click 이벤트로 값 변경 막기

$(document).ready(function() {
    $(".radio").on('click', function(){
        if(!activeUser){ // 현 사용자의 페이지가 아니면
            return (false); // ==> 클릭되어도 값이 바뀌지 않는다!
        }
    });
}

 

▶ 동적으로 radio를 만든 경우, radio click 이벤트 처리

이걸로 조금 애먹었다.....

 

동적으로 생성하는 라디오(radio), 체크박스(checkbox)는

document.ready가 실행될 때 로드되지 않았기 이벤트에 바인딩을 걸 수 없다.

 

동적으로 radio, checkbox를 만들었을 때는 document.ready에 이벤트를 만들지 말자....

아래 코드로 작성하면 동적으로 만든 radio에 이벤트를 바인딩할 수 있다.

$(document).on('click', '.radio', function(){
	if(!activeUser){ // 현 사용자의 페이지가 아니면
 		return (false); // ==> 클릭되어도 값이 바뀌지 않는다!
  	}
});

 

출처: https://zest0804.tistory.com/entry/동적으로-radio-checkbox를-만든-경우-동작하지-않는-이벤트-처리하기-onclick-onchange [퍼주는 마음 부자]