버튼

버튼은 disabled브라우저에서 처리하는 버튼 속성 과 마찬가지로 비활성화 하기 쉽습니다.

<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 함수를 사용하여이를 비활성화하려면 간단히 다음을 사용하십시오 fn.extend().

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

// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddle 비활성화 버튼 및 입력 데모 .

그렇지 않으면 jQuery의 prop()메소드를 사용합니다.

$('button').prop('disabled', true);
$('button').prop('disabled', false);

앵커 태그

앵커 태그 disabled의 올바른 속성 이 아니라는 점에 주목할 가치가 있습니다. 이러한 이유로 Bootstrap은 .btn요소 에 다음 스타일을 사용합니다 .

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

[disabled]속성뿐만 아니라 .disabled클래스 가 어떻게 대상 인지 확인하십시오 . 이 .disabled클래스는 앵커 태그를 비활성화 된 상태로 만드는 데 필요합니다.

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

물론 이렇게하면 클릭 할 때 링크가 작동하지 않습니다. 위 링크는 http://example.com으로 연결됩니다 . 이를 방지하기 위해 disabled호출 할 클래스로 앵커 태그를 대상으로하는 간단한 jQuery 코드를 추가 할 수 있습니다 event.preventDefault().

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

다음 disabled을 사용하여 클래스를 토글 할 수 있습니다 toggleClass().

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

JSFiddle은 링크 데모를 비활성화했습니다 .

결합

그런 다음 위에서 만든 비활성화 기능을 확장하여를 사용하여 비활성화하려는 요소의 유형을 확인할 수 is()있습니다. 우리가 할 수있는이 방법은 toggleClass()그것이 아닌 경우 input또는 button요소, 또는 토글 disabled재산이있는 경우 :

// Extended disable function
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);
        });
    }
});

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

완전한 결합 된 JSFiddle 데모 .

위 함수가 모든 입력 유형에서도 작동한다는 점에 주목할 가치가 있습니다.

답변

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

$('input[type="submit"]').attr('disabled','disabled');

<input type="submit" class="btn" value="Submit" disabled/>

 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

.selector { pointer-events:none; }

button[disabled] { ... }

input[type=button][disabled] { ... }

 $("#button").prop('disabled', true);

$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'

setState=($el, state) ->
    $el.each ->
        $(@).prop('disabled', state) if $(@).is 'button, input'
        if state then $(@).addClass('disabled') else $(@).removeClass('disabled')

    $('body').on('click', 'a.disabled', -> false)

$('.btn-stateful').disable()
$('#my-anchor').enable()

$('#my-anchor').click ->
    return false if $(@).isDisabled()
    # do something useful

var myButton = $('#myBootstrapButton');
myButton.button('loading');

myButton.button('reset').prop('disabled', true); // DOES NOT WORK

myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);