※ 원활한 사이트 이용을 위해 자바스크립트 사용을 허용해주세요.

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

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

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;
}

관련 정보

  1. KBoard 입력 필드 활용법
  2. KBoard 체크박스 반드시 선택하게 만들기
작성일
2017-12-10

댓글 기능 준비중입니다.

게시글에 문제가 있다면 자유게시판에 남겨주세요.
감사합니다.