비활성화 체크박스 전체 선택시 체크 금지

JavaScript & HTML

by husks 2020. 7. 23. 11:59

전체 체크박스 선택으로 나머지 체크박스를 선택하고 싶을때가 있습니다.

해당 체크 박스 중 비활성화가 있다면 체크하지 못하도록 막는 예제소스 입니다.

소스에 주석을 참고하여 확인하시면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
    <title>Fruit</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            
            $('input[name="checkAll"]').click(function () { //전체선택 체크
              var chk = $(this).is(":checked"); //전체선택의 체크 여부 확인
              if(chk){ //전체선택이 체크 되었다면
                $('input[name="fruit"]').each(function(){ //fruit 이름을 갖고 있는 체크박스를 반복 실행
                  var disabled = $(this).prop("disabled"); //비활성화 여부 체크
                  if(!disabled){ //비활성화가 아니라면
                    $(this).prop('checked', true); //체크 실행
                  }
                });
              }else{//전체선택이 체크되지 않았다면
                $('input[name="fruit"]').prop('checked', false); //전체 체크 풀기 (체크 푸는건 모두 해도 상관 없음)
              }
            });
            
        });
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>
                <input type="checkbox" name="checkAll" value="apple">
            </td>
            <td>
                전체 선택
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="fruit" value="apple">
            </td>
            <td>
                사과
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="fruit" value="banana" disabled>
            </td>
            <td>
                바나나
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="fruit" value="peach">
            </td>
            <td>
                복숭아
            </td>
        </tr>
    </table>
</body>
</html>

저작자표시 비영리 변경금지

'JavaScript & HTML' 카테고리의 다른 글

selectbox change 이전값 확인 (0)	2021.08.25
JavaScript 클립보드 복사하기 (0)	2020.07.24
크롬 플래시 항상 허용 (크롬 끄고 다시 켜도 허용) (0)	2018.11.20
자바스크립트 substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기) (4)	2017.11.14
뒤로가기, 이전 페이지 이동 (0)	2017.10.12