버튼과 링크를 비활성화 / 활성화하는 가장 쉬운 방법은 무엇입니까 (jQuery + Bootstrap)
때로는 버튼 스타일의 앵커를 사용하고 때로는 버튼 만 사용합니다. 특정 클릭 콘텐츠를 비활성화하고 싶습니다.
- 그들은 장애인 보인다
- 클릭이 중지됩니다
어떻게해야합니까?
버튼
버튼은 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);
그렇지 않으면 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);
결합
그런 다음 위에서 만든 비활성화 기능을 확장하여를 사용하여 비활성화하려는 요소의 유형을 확인할 수 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);
위 함수가 모든 입력 유형에서 작동한다는 점에 주목할 가치가 있습니다.
더 간단하고 쉬운 방법으로 생각할 수 없습니다! ;-)
앵커 태그 (링크) 사용 :
<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');
위의 행을 실행하면 제출 버튼 html 태그는 다음과 같습니다.
<input type="submit" class="btn" value="Submit" disabled/>
'disabled'속성이 추가되었습니다 .
활성화 :
텍스트 필드에 텍스트가있을 때와 같은 활성화 버튼 다음과 같이 disable 버튼을 활성화 하려면 disable 속성 을 제거해야합니다 .
if ($('#text-field').val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
위의 코드는 'disabled'속성을 제거합니다.
나는 파티에 늦었다는 것을 알고 있지만 두 가지 질문에 구체적으로 대답합니다.
"저는 특정 클릭을 사용하지 않도록 설정하고 싶습니다.
- 그들은 클릭을 중지
- 그들은 장애인 보인다
얼마나 힘들까요? "
그들은 클릭을 중지
1. 다음과 같은 버튼 <button>또는 <input type="button">속성을 추가하십시오 disabled.
<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>
2. 링크, 모든 링크, 실제로는 HTML 요소의 경우 CSS3 포인터 이벤트를 사용할 수 있습니다 .
.selector { pointer-events:none; }
포인터 이벤트에 대한 브라우저 지원은 오늘날의 최신 기술 (5/12/14)에 의해 대단합니다. 그러나 우리는 일반적으로 IE 영역에서 레거시 브라우저를 지원해야하므로 IE10 이하는 포인터 이벤트를 지원하지 않습니다 : http://caniuse.com/pointer-events . 따라서 다른 사람들이 언급 한 JavaScript 솔루션 중 하나를 사용하면 레거시 브라우저로 갈 수 있습니다.
포인터 이벤트에 대한 추가 정보 :
- https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
- http://wiki.csswg.org/spec/css4-ui#pointer-events
그들은 장애인 보인다
분명히 이것은 CSS 답변이므로 다음과 같습니다.
같은 버튼 1. <button>또는 <input type="button">사용 [attribute]선택기를 :
button[disabled] { ... }
input[type=button][disabled] { ... }
-
여기 내가 언급 한 것들에 대한 기본 데모가 있습니다 : http://jsfiddle.net/bXm5B/4/
도움이 되었기를 바랍니다.
나처럼 버튼을 비활성화하려면이 긴 스레드에 미묘하게 숨겨진 간단한 답변을 놓치지 마십시오.
$("#button").prop('disabled', true);
@James Donnelly는 jQuery를 새로운 기능으로 확장하는 데 의존하는 포괄적 인 답변을 제공했습니다. 그것은 좋은 생각입니다. 그래서 나는 그의 코드를 내가 원하는 방식으로 작동하도록 조정할 것입니다.
jQuery 확장
$.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()
코드는 단일 요소 또는 요소 목록을 처리합니다.
버튼과 입력은 disabled속성을 지원하며로 설정하면 true비활성화 된 것으로 보이며 (부트 스트랩 덕분에) 클릭 할 때 실행되지 않습니다.
앵커는 우리가에 의존하려고하는 그래서 대신 사용할 속성을 지원하지 않는 .disabled그들 (다시 부트 스트랩 감사) 및 기본 클릭 이벤트를 연결 장애인을 보이게 클래스 그 (필요 거짓을 반환하지 않습니다에 의해 방지 클릭 preventDefault참조 여기에 ) .
참고 : 앵커를 다시 활성화 할 때이 이벤트를 분리 할 필요가 없습니다. 단순히 .disabled수업을 제거하는 것이 요령입니다.
물론 이것은 사용자 정의 클릭 핸들러를 링크에 첨부 한 경우 도움이되지 않습니다. 이는 부트 스트랩 및 jQuery를 사용할 때 매우 일반적입니다. 그래서 이것을 다루기 위해 우리는 다음과 같이 isDisabled()확장을 사용 하여 .disabled클래스 를 테스트 할 것입니다.
$('#my-anchor').click ->
return false if $(@).isDisabled()
# do something useful
나는 그것이 조금 단순화하는 데 도움이되기를 바랍니다.
부트 스트랩의 JS 버튼과 '로드 중'상태를 사용하는 경우 이상한 문제가 있습니다. 왜 이런 일이 발생하는지 모르겠지만 해결 방법은 다음과 같습니다.
버튼이 있고 로딩 상태로 설정했다고 가정 해보십시오.
var myButton = $('#myBootstrapButton');
myButton.button('loading');
이제로드 상태에서 꺼내고 비활성화 할 수도 있습니다 (예 : 버튼은 저장 버튼,로드 상태는 진행중인 유효성 검사를 나타내며 유효성 검사에 실패했습니다). 이것은 합리적인 부트 스트랩 JS처럼 보입니다.
myButton.button('reset').prop('disabled', true); // DOES NOT WORK
불행히도 버튼을 재설정하지만 비활성화하지는 않습니다. 분명히 button()지연된 작업을 수행합니다. 따라서 비활성화를 연기해야합니다.
myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);
약간 성가 시지만 많이 사용하는 패턴입니다.
모두의 큰 답변과 기여! 선택 요소 비활성화를 포함하도록이 기능을 약간 확장해야했습니다.
jQuery.fn.extend({
disable: function (state) {
return this.each(function () {
var $this = jQuery(this);
if ($this.is('input, button'))
this.disabled = state;
else if ($this.is('select') && state)
$this.attr('disabled', 'disabled');
else if ($this.is('select') && !state)
$this.removeAttr('disabled');
else
$this.toggleClass('disabled', state);
});
}});
나를 위해 일하는 것 같습니다. 모두 감사합니다!
이러한 종류의 동작을 위해 항상 jQueryUI button위젯을 사용하고 링크 및 버튼에 사용합니다.
HTML 내에 태그를 정의하십시오.
<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>
jQuery를 사용하여 버튼을 초기화하십시오.
$("#sampleButton").button();
$("#linkButton").button();
사용 button하지 않도록 설정하는 위젯 방법을 /를 활성화합니다
$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button
버튼과 커서 동작을 처리하지만 비활성화 할 때 버튼 스타일을 더 깊이있게 변경하고 변경 해야하는 경우 페이지 CSS 스타일 파일에서 다음 CSS 클래스를 덮어 쓰십시오.
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
background-color:aqua;
color:black;
}
그러나 CSS 클래스 (변경된 경우)는 다른 위젯의 스타일도 변경합니다.
다음은 저에게 매우 효과적이었습니다.
$("#button").attr('disabled', 'disabled');
이것은 다소 늦은 답변이지만 부스트 랩 버튼을 클릭 한 후 비활성화하고 멋진 효과 (스피너)를 추가하는 방법을 찾고있는 동안이 질문에 우연히 발견되었습니다. 나는 그것을 정확하게하는 훌륭한 도서관을 발견했다.
http://msurguy.github.io/ladda-bootstrap/
당신은 필요한 CSS와 JS를 포함하고, 버튼에 몇 가지 속성을 추가하고, 자바 스크립트로 lada를 활성화합니다 ... Presto! 버튼의 수명이 새로워졌습니다 (데모를 확인하여 얼마나 아름다운지 확인하십시오).
때로는 위의 이유로 작동하지 않습니다.
$(this).attr('checked') == undefined
로 코드를 조정하십시오
if(!$(this).attr('checked') || $(this).attr('checked') == false){
답변이 늦었다는 것을 알고 있지만 IMO는 '활성화'버튼과 '비활성화'버튼을 전환하는 가장 쉬운 방법입니다.
function toggleButtonState(button){
//If button is enabled, -> Disable
if (button.disabled === false) {
button.disabled = true;
//If button is disabled, -> Enable
} else if (button.disabled === true) {
button.disabled = false;
}
}
페이지에 다음과 같은 버튼이 있다고 가정하십시오.
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>
JS 코드 :
function change(){
var toenable = document.querySelectorAll(".byBtn");
for (var k in toenable){
toenable[k].removeAttribute("disabled");
}
}
현재 활성화되어있는 것처럼 보입니다.
<button id="btnSave" class="btn btn-info">Save</button>
이것을 추가하십시오 :
$("#btnSave").prop('disabled', true);
버튼을 비활성화 할 수 있습니다.
<button id="btnSave" class="btn btn-primary" disabled>Save</button>
'Programing' 카테고리의 다른 글
| void 메소드가 예외를 던지는 Mockito 테스트 (0) | 2020.03.01 |
|---|---|
| Google OAuth 2 인증-오류 : redirect_uri_mismatch (0) | 2020.03.01 |
| 파이썬의 알파벳 범위 (0) | 2020.03.01 |
| Android 에뮬레이터에서 가로 모드로 전환 (0) | 2020.03.01 |
| Java로 GUID 만들기 (0) | 2020.03.01 |