CSS를 사용하여 요소를 비활성화하는 방법

다음 코드는 선택 항목을 3 개로 제한하고 더 이상 선택할 수 없다는 경고를 제공합니다.CSS를 사용하여 요소를 비활성화하는 방법

대신 다른 옵션을 비활성화하고 CSS로 회색으로 표시하고 싶습니다. 0.2의 불투명도의 CSS 스타일로 .disabled라는 클래스를 간단하게 추가하는 것이 트릭을 수행 할 것이라고 생각했습니다.

이 코드는 $('ul.image_picker_selector li').attr('class', 'disabled');을 사용해 보았습니다.하지만 나머지 코드는 깨지고 선택한 클래스가 아닌 모든 옵션에 클래스가 추가됩니다.

도움을 주시면 감사하겠습니다.

<script type="text/javascript"> 
    jQuery(function($){ 
     $(document).on('mousedown', 'ul.image_picker_selector li', function(evt) { 
     evt.preventDefault(); 
     evt.stopPropagation(); 

     // get the number of items already selected: 
     var ctSelected = $(this).siblings('.selected').length; 

     if (ctSelected === 3) { 
      alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.'); 
     } else { 
      $(this).toggleClass('selected'); 
     } 
    }); 
    }) 
     </script> 

    <ul class="thumbnails image_picker_selector"> 
    <li class="selected"> 
    <div class="thumbnail selected"> 
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-1.jpg"> 
    </div> 
    </li> 
    <li class=""><div class="thumbnail selected"> 
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-2.jpg"> 
    </div> 
    </li> 
    <li class=""> 
    <div class="thumbnail"> 
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-3.jpg"> 
    </div> 
    </li> 
    <li class=""> 
    <div class="thumbnail"> 
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-4.jpg"> 
    </div> 
    </li> 
    <li> 
    <div class="thumbnail"> 
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-5.jpg"> 
    </div> 
    </li> 
    <li> 
    <div class="thumbnail"> 
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-6.jpg"> 
    </div> 
    </li> 
    </ul>

출처

2013-05-21 Jeremy

나는 그들에 추가 CSS 클래스가 선택이 arent 옵션이 필요합니다 Example on JSfiddle

나는이 추가되었습니다.. CSS ('opacity', '0.2'); – Jeremy

귀하의 질문은 약간 혼란 스럽습니다. 제목이 잘못되었습니다. CSS를 통해 요소를 비활성화하거나 사용할 수 없습니다. 스타일 만 변경하십시오 (스타일 지정). 따라서 DOM 트리에서 비활성화 및 변경하고 요소를 사용하려면 javascript를 사용할 수 있습니다. 왜 문서를 사용하여 함수를 바인딩합니까? 그리고 토글 클래스 ('selected')는 아마도 당신이 원하는 것을하지 않을 것입니다. 먼저 상태를 확인하지 않겠습니까? 시도하고 더 나은 답변을 얻기 위해 귀하의 질문을 수정하십시오. – aldux

이 선택 작업을해야합니다 : 또한

$('ul.image_picker_selector li:not(.selected)').addClass('disabled');

을 addClass 클래스를 변경하는 attr를 사용하여 다른 CSS를 파괴하지 않고 (내가 잘못 아니에요 경우) 쉽게 달리 removeClass로 되돌릴 수 있습니다 사용.

더 깊이 들어가서 toggleClass을 사용할 수도 있습니다.

출처

2013-05-21 15:54:32

위의 코드는 훌륭하게 작동하지만 그 클래스의 여러 ul 목록은 어떻게됩니까? 해당 페이지의 다른 클래스에도 클래스를 추가합니까? – Jeremy

그 위에, 내가 강을 선택 취소 할 때, 수업을 삭제하고 싶습니다 ... 어떤 생각입니까? – Jeremy

이렇게하면 클래스가 제거됩니다. if (ctSelected <3) { $ ('ul.image_picker_selector li : not (.selected)'). removeClass ('disabled'); } – Jeremy

이와 비슷한? ('선택했습니다.')이 $ ('리')를 작동하지 -

if (ctSelected === 2) { 
      $('ul.image_picker_selector li').not('.selected').addClass('disabled') 
     }

출처

2013-05-21 16:04:22 NicolaPasqui

CSS를 사용하여 요소를 비활성화하는 방법

답변

관련 문제