munak

비공개 모임 시 비밀번호를 입력할 수 있고, 공개모임시 입력창 잠그기 본문

SW 개발 언어/4. javascript

비공개 모임 시 비밀번호를 입력할 수 있고, 공개모임시 입력창 잠그기

moonhak 2016. 3. 14. 15:44

아래처럼 모임을 만들다보면, 

공개 모임이 선택됐을 때는 비밀번호를 입력 못하게 막고,

비공개 모임이 선택됐을 때는 비밀번호를 입력할 수 있게 JavaScript로 설정하고 싶을 때는 다음과 같은 방법을 사용할 수 있습니다.



1. view(부트스트랩 사용)

        <label>공개설정</label>
<div class="row">
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="a" id="a1" value="open_meeting" checked>
공개 모임
</label>
</div>
</div>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="a" id="a2" value="close_meeting">
비공개 모임
</label>
</div>
</div>
<div class="col-md-4">
<input type="password" class="form-control" name="b" id="b" placeholder="비밀번호 입력" disabled>
</div>
</div>

2. javascript 

$(document).ready(function () {
$('#a2').click(function(){
$('#b').attr("disabled", false);
});
$('#a1').click(function(){
$('#b').val('');
$('#b').attr("disabled", true);
});
});

초기에 기본값으로 공개모임이 선택되어 있기 때문에, 비밀번호 입력창은 disabled 되어 있습니다. 

따라서 비공개모임이 선택되면 disabled를 false로 설정하여 사용가능하도록 변경해주어야 하고,

공개모임이 다시 선택된다면 disabled를 true로 선택하여 비밀번호 입력창을 사용 못하도록 변경해야 합니다.

또한 입력 폼에 입력된 내용을 지우는 방법으로 .val('');를 사용 할 수 있습니다.

라디오 버튼, 체크박스 등에서는 checked와 disabled를 사용하는데, 보통 attr("disabled")처럼 바로 입력할 수 있지만, 이는 적절한 방법이 아닙니다.( 원하는 동작이 이루어지지 않습니다.)

Comments