KBoard 라디오버튼 필수로 선택하게 하기

2017-12-10

김 태영

이전 글(링크)에선 체크박스를 반드시 선택하게 하였는데, 이번엔 라디오버튼을 필수로 선택하게 하거나 특정 옵션을 선택해야만 글이 등록되게 하는 코드를 기록해둔다.

1. script.js 수정

수정하고자 하는 KBoard 스킨의 script.js 파일을 열고 다음 코드를 찾는다.
※ KBoard 최신 버전의 경우 script.js 파일이 존재하나, 스킨에 따라 editor.php 파일에 inline으로 script가 삽입되어있는 경우도 있으니 주의하자.

function kboard_editor_execute(form){
    jQuery.fn.exists = function(){
        return this.length>0;
    };

    ...

    jQuery(form).data('submitted', 'submitted');
    jQuery('[type=submit]', form).text(kboard_localize_strings.please_wait);
    jQuery('[type=submit]', form).val(kboard_localize_strings.please_wait);
    return true;
}

2. 라디오버튼을 검사하는 script 추가

위 코드에서 생략된 … 부분에 다음 코드를 추가하여 체크박스를 검사한다.

if ( ! jQuery('input[name="라디오버튼name"]:checked').val() ) {
    alert('옵션을 선택해주세요.');
    jQuery('input[name="라디오버튼name"]').focus();
    return false;
}

input[name="라디오버튼name"]에 추가한 라디오버튼의 name을 입력하면 된다.

3. 특정 옵션을 선택 해야하게 만드는 script

if ( jQuery('input[name="라디오버튼name"]:checked').val() !== 'value값' ) {
    alert('옵션을 선택해주세요.');
    jQuery('input[name="라디오버튼name"]').focus();
    return false;
}

2번과 마찬가지로 input[name="라디오버튼name"]을 자신의 input name으로 교체해주고 value값을 해당 input의 value값으로 변경하면 된다.
예를들어 다음과 같은 코드가 있다고 할 경우

<div class="agree-button">
    <label for="agree">
        <input type="radio" name="kboard_option_privacyAgree" id="agree" value="1" <?php echo ( $content->option->privacyAgree == '1' ) ? 'checked="checked"' : '' ; ?>>
        <span class="text">동의합니다.</span>
    </label>
    <label for="disagree">
        <input type="radio" name="kboard_option_privacyAgree" id="disagree" value="2" <?php echo ( $content->option->privacyAgree == '2' ) ? 'checked="checked"' : '' ; ?>>
        <span class="text">동의하지 않습니다.</span>
    </label>
</div>

스크립트는 다음과 같이 작성된다.

if ( jQuery('input[name="kboard_option_privacyAgree"]:checked').val() !== '1' ) {
    alert('동의하셔야 작성이 가능합니다.');
    jQuery('input[name="kboard_option_privacyAgree"]').focus();
    return false;
}

Wallel

KBoard 라디오버튼 필수로 선택하게 하기

1. script.js 수정

2. 라디오버튼을 검사하는 script 추가

3. 특정 옵션을 선택 해야하게 만드는 script

관련 정보