[프로젝트] 게시판 등록 - radio, select (활성화, 비활성화)

 

12/28

 

 

 

분실 물품을 선택할 때 한가지 물품만 선택할 수 있고, 기타를 체크했을때 직접입력 할 수 있는 인풋 박스가 활성화 되게 바꾸기.

 

 

한가지 물품만 선택할 수 있게 하는 방법은 기존에 사용했던 checkbox 를 radio로 바꿔주니 간단하게 해결됐다.

 

 

기존코드 

<div class="item3">
            <h6>* 분실 물품</h6>
                <span><input type="checkbox" >  핸드폰</span>
                <span><input type="checkbox" >  지갑</span>
                <span><input type="checkbox" >  가방</span>
                <span><input type="checkbox" >  책</span>
                <span><input type="checkbox" >  화장품</span>
                <span><input type="checkbox" >  기타</span>
                <span><input type="text" class="form-control" placeholder="직접입력" disabled></span> 
             
        </div>

 

 

 

변경코드

<div class="item3">
            <h6>* 분실 물품</h6>
            	<form>
                <label><input type="radio" name="radio" onClick="this.form.textbox.disabled=true" checked="checked">  핸드폰</label>
                <label><input type="radio" name="radio" onClick="this.form.textbox.disabled=true">  지갑</label>
                <label><input type="radio" name="radio" onClick="this.form.textbox.disabled=true">  가방</label>
                <label><input type="radio" name="radio" onClick="this.form.textbox.disabled=true">  책</label>
                <label><input type="radio" name="radio" onClick="this.form.textbox.disabled=true">  화장품</label>
                <label><input type="radio" name="radio" onClick="this.form.textbox.disabled=false">  기타</label>
                <label><input type="text" name="textbox" class="form-control" placeholder="직접입력" disabled></label> 
       			</form> 
        </div>

 

 

변경 후 모습

 

 

몇시간을 고민했는데 생각보다 아주 간단했다.ㅠㅠ후

 

 

 

사례금 선택 부분도 무료글일땐  사례금 selectbox가 활성화 되지 않고 비활성화 되어야하니, 

위와 같은 방법으로 코드를 변경했다.

 

 

기존코드 

<div class="item10">
            <h6>사례금</h6>
            <span><input type="checkbox">무료글등록</span>
            <span><input type="checkbox">사례금등록</span>
                <select>
                    <option>선택</option>
                    <option>10,000원</option>
                    <option>30,000원</option>
                    <option>50,000원</option>
                    <option>100,000원</option>
                    <option>직접입력</option>
                </select>
                <span><input type="text" class="form-control" placeholder="직접입력" disabled></span> 
        </div>

 

기존 모습

 

 

변경코드

 

<div class="item10">
            <h6>사례금</h6>
            <form>
            <label><input type="radio" name="radio" onClick="this.form.selbox.disabled=true" checked="checked">무료글등록</label>
            <label><input type="radio" name="radio" onClick="this.form.selbox.disabled=false">사례금등록</label>
                <select id="selbox" name="selbox" disabled>
                    <option value="" >선택</option>
                    <option value="1">10,000원</option>
                    <option value="2">30,000원</option>
                    <option value="3">50,000원</option>
                    <option value="4">100,000원</option>
                    <option value="direct">직접입력</option>
                </select>
                <input type="text" class="form-control" name="selboxDirect" placeholder="직접입력" disabled>  
            </form>
        </div>

 

 

변경 후 모습

 

 

 

 

 

 

변경코드

//사례금선택시에 직접입력 선택하면 인풋창 활성화 됨
	$(function(){	
		$(document).on("change", "select[name=selbox]", function(){
        //name=selbox에서 select값이 change되면 함수실행.
			var value = $(this).find("option[name=sel]:selected").val();
            //this에 name=sel이 선택됐을때 value="direct" 를 저장.
			var inputText = $(this).closest('.item10').find('.form-control');
            //this에 가장 가까운 item10클래스에서 form-control클래스를 찾아서 저장.
			var flag = true;
			

			if (value == 'direct') {
            //value에 direct가 저장됐을때,
				flag = false;
			//flag의 값을 false로 변경함.
			}
			
			$(inputText).attr("disabled", flag);
            //inputText의 disabled를 false로 변경해줌. - 활성화 됨!!!
		});

	})

 

<div class="item10">
            <h6>사례금</h6>
            <form>
            <label><input type="radio" name="radio" onClick="this.form.selbox.disabled=true" checked="checked">무료글등록</label>
            <label><input type="radio" name="radio" onClick="this.form.selbox.disabled=false">사례금등록</label>
                <select id="selbox" name="selbox" disabled>
                    <option value="" >선택</option>
                    <option value="1">10,000원</option>
                    <option value="2">30,000원</option>
                    <option value="3">50,000원</option>
                    <option value="4">100,000원</option>
                    <option value="direct" name="sel">직접입력</option>
                </select>
                <input type="text" class="form-control" name="selboxDirect" placeholder="직접입력" disabled>  
            </form>
        </div>

 

기존 모습

 

 

변경후 모습