2017-12-29 10 views
-1

다른 토글 버튼을 사용하여 일부 버튼을 활성화/비활성화하려고합니다.다른 버튼을 사용하여 버튼을 활성화/비활성화하려면 어떻게합니까?

버튼에 '활성'클래스를 추가하고 클래스와 함께 버튼 만 타겟팅하여이를 수행하려고합니다. 여기

(즉 작동하지 않습니다) 예입니다

$('#on-off').on('click',() => { 
 
    $('#test').addClass('active'); 
 
    $('#indication').text('Test is active'); 
 
    }); 
 
    
 
    $('#test .active').on('click',() => { 
 
    $('#result').text('Test was clicked!'); 
 
    });
<button id='on-off'>Toggle Test</button> 
 
<div id='indication'></div> 
 

 
<button id='test'>Test</button> 
 
<div id='result'></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

전체 코드는 here입니다.

+0

'하는 클래스 class.' 만의 버튼을 대상으로? – brk

답변

5

활성화하거나 비활성화하려면 disabled property을 설정해야합니다. .prop() 메서드를 사용할 수 있습니다.

참고 #test .active은 자손 선택자로 작동하지 않으며 버튼에는 자식 요소가 없습니다.

$('#on-off').on('click',() => { 
 
    $('#test').prop('disabled', !$('#test').prop('disabled')); 
 
    $('#indication').text('Test is active'); 
 
}); 
 

 
$('#test').on('click',() => { 
 
    $('#result').text('Test was clicked!'); 
 
});
<button id='on-off'>Toggle Test</button> 
 
<div id='indication'></div> 
 

 
<button id='test'>Test</button> 
 
<div id='result'></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>