버튼
버튼은 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 데모 .
위 함수가 모든 입력 유형에서도 작동한다는 점에 주목할 가치가 있습니다.
