jQuery와 Bootstrap을 사용하여 버튼과 링크를 비활성화하고 활성화하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

jQuery와 Bootstrap을 사용하여 버튼과 링크를 비활성화하고 활성화하려면 어떻게 해야 합니까?

Susan Sarandon

풀어 주다： 2024-12-12 22:14:14

원래의

240명이 탐색했습니다.

How Can I Disable and Enable Buttons and Links Using jQuery and Bootstrap?

jQuery와 Bootstrap을 사용하여 버튼과 링크 비활성화 및 활성화

특정 버튼이나 링크가 클릭되지 않도록 방지하고 비활성화된 모양으로 표시해야 하는 경우가 있습니다. jQuery와 Bootstrap을 사용하여 이를 달성하는 방법은 다음과 같습니다.

버튼

HTML의 버튼에는 "비활성화" 속성이 내장되어 있어 쉽게 비활성화할 수 있습니다.

<button class="btn" disabled>Disabled Button</button>

로그인 후 복사

사용자 정의 jQuery 기능으로 버튼을 비활성화하려면 비활성화()를 사용하여 기능을 확장하세요. 방법:

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

$('button').disable(true); // Disable buttons
$('button').disable(false); // Enable buttons

로그인 후 복사

앵커 태그

Disabled는 앵커 태그()에 대한 유효한 속성이 아닙니다. 대신 Bootstrap은 .btn.disabled 클래스로 요소의 스타일을 지정하여 비활성화된 것처럼 보이게 만듭니다.

<a href="#" class="btn disabled">Disabled Link</a>

로그인 후 복사

비활성화되었을 때 링크가 작동하지 않도록 하려면 jQuery를 사용하여 클릭을 차단하세요.

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

로그인 후 복사

결합된 접근 방식

disable() 함수를 확장하여 입력, 버튼 및 링크:

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, button, a').disable(true); // Disable all clickable elements
$('input, button, a').disable(false); // Enable all clickable elements

로그인 후 복사

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