jquery를 사용하는 첫 번째 두 상태의 상태를 기반으로 세 번째 확인란을 제어하십시오.

세 개의 확인란이 있으며 두 개 중 하나 또는 두 개를 모두 선택하면 세 번째 확인란을 사용하지 않도록 설정해야합니다. 나는 현재 가지고있는 것보다 쉬운 방법이있을 것이라고 확신합니다. 그것은 내가 엉망이라고 믿는 것으로 변하고 있습니다. jquery 지식이 더 많은 사람이 빛을 비출 수 있기를 바랍니다.jquery를 사용하는 첫 번째 두 상태의 상태를 기반으로 세 번째 확인란을 제어하십시오.

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script src="custom.js" type="text/javascript"></script> 
</head> 
<body> 
     <input type="checkbox" class="class" id="1">First 
     <input type="checkbox" class="class" id="2">Second 
     <input type="checkbox" class="class" id="3">Third 
    </body> 
</html>

여기가 자기의 비활성화됩니다 # 3를 확인하는 몇 가지 이유를 들어 JQuery와 5.0

jQuery(document).ready(function() { 
// watches the events of all checkboxes 
$(":checkbox").click(function(){ 
if(
    // if both 1 and 2 are checked we don't want to enable Third until both are unchecked. 
    (($('#1:checkbox').attr('checked'))&&($('#2:checkbox').attr('checked')))|| 
    ((($('#1:checkbox').attr('checked'))&&($('#2:checkbox').attr('checked')))&&($('#3:checkbox').attr('disabled')))|| 
    ((($('#1:checkbox').attr('checked'))||($('#2:checkbox').attr('checked')))&&($('#3:checkbox').attr('disabled'))) 
){ 
    // we don't want to do anything in the above events 
} else if( 

    // handles the First check box 
    (($('#1:checkbox').attr('checked'))||(!$('#1:checkbox').attr('checked')))|| 
    // handles the Second check box 
    (($('#2:checkbox').attr('checked'))||(!$('#2:checkbox').attr('checked'))) 

){ 
// call the disableThird function 
disableThird(); 
} 
}); 

// handles enabling and disabling the Third checkbox 
function disableThird(){ 
    var $checkbox = $('#3:checkbox'); 
    $checkbox.attr('disabled', !$checkbox.attr('disabled')); 
}; 
});

와 내가 사용 자바 스크립트입니다 :

은 여기 내 간단한 HTML 양식입니다. 나는 왜 그런지 이해하지 못한다.

이 방법이 효과적이지만 요구 사항 중 하나는 비 프로그래머가이를 편집하고 유지 관리 할 수 있어야한다는 것입니다. 이상적으로 그는 html에 새로운 체크 박스를 추가 할 수 있다면 효과적 일 것입니다. 이것들에 대한 클래스는 정의되어 있으며, 내가 아는 한 변경할 수 없습니다. 위 목록 중 하나라도 선택되면 확인란 목록의 마지막 확인란이 비활성화됩니다. 마지막 체크 박스가 선택되면 현명한 것처럼 그 위의 모든 체크 상자는 비활성화됩니다. 필자는 프로그래머가 아닌 사람이 처리하기에는 너무 복잡 해짐에 따라 그 부분을 작성하고 테스트하기조차하지 못했습니다. 나 자신은 js보다는 더 많은 PHP 코더이다. jquery, 코더는 말할 것도 없다. 어떤 도움이라도 대단히 감사하겠습니다.

출처

2010-06-13 Moj

그래, id 속성은 숫자로 시작할 수 없습니다. 또한 <label> 태그는 체크 박스 옆에있는 텍스트를 클릭 할 수 있도록 추가하는 것이 좋습니다. 여기

내가 당신의 HTML 변경 할 방법은 다음과 같습니다

<label><input type="checkbox" class="chkGroup" id="chk1">First</label> 
<label><input type="checkbox" class="chkGroup" id="chk2">Second</label> 
<label><input type="checkbox" class="chkGroup" id="chk3">Third</label>

을 그리고 여기에 자바 스크립트 코드입니다 :

$('.chkGroup').bind('click', function(){ 
    if ($('#chk1:checked,#chk2:checked').length > 0) { 
     $('#chk3').attr('disabled', 'disabled').removeAttr('checked'); 
     $('#chk3').parent('label').css({color: '#ccc'}); 
    } else { 
     $('#chk3').removeAttr('disabled'); 
     $('#chk3').parent('label').css({color: '#000'}); 
    } 
});

하는 것을 선택하면, 당신은 단지 :checked selector을 사용할 수 있습니다 확인합니다. 인접한 확인란이 비활성화되어있는 경우 css() 호출을 추가하여 회색으로 표시합니다.

출처

2010-06-13 00:57:27 artlung

매우 빠른 답장을 보내 주셔서 감사합니다. 그것이 간결한 코드와 제가 수행하는 유형입니다. 나는 jquery가 이것을 단순화 할 수 있음을 알았고 나는 그것을 더 어렵게 만들고 있습니다. 이드는 숫자로 시작하지 않는다. 알림 주셔서 감사. 나는 진짜로 레이블을 추가하거나 CMS에서 생성 된 HTML을 편집 할 수있는 옵션이 없습니다. 나는 지금 그것을 간단하게 유지하려고 노력하고있다. 그리고 더 큰 그림의 바깥쪽에 js를 내려 놓으려고 노력한다. 클래스가 페이지의 다른 컨트롤과 공유된다고 언급하는 것을 잊었습니다. 내가 관심이없는 컨트롤. 멋진 코드! 당신이 제공 한 것을 가져 와서 몇 가지 수정을했고 잘 작동합니다.

여기에 내가 가진 무엇 : 하나 또는 #의 CHK1 및 #의 chk2 모두 확인 될 때 #의 chk3을 해제에 마법처럼

$(":checkbox").click(function(){ 
    if ($('#chk1:checked,#chk2:checked').length > 0) { 
     $('#chk3').attr('disabled', 'disabled').removeAttr('checked'); 
    } else { 
     $('#chk3').removeAttr('disabled'); 
    } 
});

작품. 이제 # chk3이 활성화되고 검사 될 때 # chk1 및 # chk2를 비활성화해야합니다. 그 기능을 추가 하시겠습니까?

출처

2010-06-13 02:17:42 Moj

질문을 업데이트하고 답변에 설명을 제공하지 마십시오. – artlung

jquery를 사용하는 첫 번째 두 상태의 상태를 기반으로 세 번째 확인란을 제어하십시오.

답변

관련 문제