jQuery와 Bootstrap을 사용하여 버튼과 링크를 쉽게 비활성화하고 활성화하는 방법은 무엇입니까?

jQuery Bootstrap을 사용하여 버튼과 링크를 손쉽게 비활성화/활성화하는 방법

문제 이해

때때로 다음과 같은 문제가 발생할 수 있습니다. 사용자가 특정 버튼이나 링크와 상호 작용하는 것을 방지하려는 상황. 여기에는 비활성화 상태를 시각적으로 표시하고 클릭 이벤트를 방지하는 작업이 포함됩니다.

버튼 솔루션

비활성화 속성을 조작하여 버튼을 원활하게 비활성화합니다.

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

사용자 정의 jQuery 비활성화 기능의 경우:

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

비활성화: $('input[type="submit"], input[type="button"], 버튼').disable(true);
활성화: $('input[type="submit"], input[type ="button"], 버튼').disable(false);

앵커 태그 솔루션 (링크)

앵커 태그에는 비활성화된 속성이 없지만 Bootstrap은 CSS 스타일로 이를 처리합니다. 또한 비활성화되었을 때 링크가 작동하지 않도록 jQuery를 통합할 수 있습니다:

.btn.disabled, .btn[disabled] {
    cursor: default;
    opacity: 0.65;
    color: #333;
    background-color: #E6E6E6;
}

<a href="http://example.com" class="btn">My Link</a>

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

비활성화: $('a').disable(true);
활성화: $( 'a').disable(false);

결합 해결책

위 접근 방식을 결합하면 비활성화 기능을 확장하여 요소 유형을 확인하고 그에 따라 비활성화를 처리할 수 있습니다.

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            if($this.is('input, button, textarea, select'))
              this.disabled = state;
            else
              $this.toggleClass('disabled', state);
        });
    }
});

모두 비활성화: $('input, 버튼, a ').disable(true);
모두 활성화: $('입력, 버튼, a').disable(false);

위 내용은 jQuery와 Bootstrap을 사용하여 버튼과 링크를 쉽게 비활성화하고 활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!