단추 및 링크를 비활성화/활성화하는 가장 쉬운 방법은 무엇입니까(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 기능을 사용하여 이러한 기능을 비활성화하려면 다음을 사용합니다.
// 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);
JS Fiddle 비활성화 버튼 및 입력 데모.
그렇지 않으면 jQuery의 방법을 사용할 수 있습니다.
$('button').prop('disabled', true);
$('button').prop('disabled', false);
앵커 태그
주목할 필요가 있습니다.disabled앵커 태그에 대한 올바른 속성이 아닙니다.이러한 이유로 부트스트랩은 다음과 같은 스타일링을 사용합니다..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 으로 이동할 수 있습니다.이를 방지하기 위해 간단한 jQuery 코드를 추가하여 다음과 같이 앵커 태그를 대상으로 할 수 있습니다.disabled호출할 클래스:
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
우리는 전환할 수 있습니다.disabled사용하여 클래스 지정:
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);
JSFidle이 비활성화된 링크 데모입니다.
합쳐진
그런 다음 위에서 만든 이전 비활성화 기능을 확장하여 를 사용하여 비활성화하려는 요소의 유형을 확인할 수 있습니다.이렇게 하면 우리는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);
완전 결합된 JSFidle 데모.
위의 기능은 모든 입력 유형에서도 작동합니다.
저는 더 단순하고 쉬운 방법을 생각할 수 없습니다! ;-)
앵커 태그(링크) 사용:
<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/>
'사용 안 함' 특성이 추가되었습니다.
활성화:
텍스트 필드에 일부 텍스트가 있는 경우와 같은 단추를 활성화합니다.다음과 같이 사용하려면 사용 안 함 특성을 제거해야 합니다.
if ($('#text-field').val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
이제 위의 코드가 '비활성화' 특성을 제거합니다.
제가 파티에 늦었다는 것은 알지만, 구체적으로 두 가지 질문에 대답하자면:
"특정 클릭 기능을 사용하지 않도록 설정하여 다음과 같은 작업을 수행하고 싶습니다.
- 클릭을 멈춥니다.
- 그들은 장애인처럼 보입니다.
이게 얼마나 어려운 일입니까?"
클릭을 멈춥니다.
다음과 같은 단추의 경우<button>또는<input type="button"> 속을추가니다합성▁the를 추가합니다.disabled.
<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>
링크의 경우 임의 링크...사실, 어떤 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 답변입니다. 따라서:
다음과 같은 단추의 경우<button>또는<input type="button">을 사용합니다.[attribute]선택기:
button[disabled] { ... }
input[type=button][disabled] { ... }
--
다음은 제가 언급한 내용을 포함한 기본 데모입니다. http://jsfiddle.net/bXm5B/4/
이게 도움이 되길 바랍니다.
저처럼 버튼을 사용하지 않으려면 이 긴 스레드에 미묘하게 숨겨진 간단한 대답을 놓치지 마십시오.
$("#button").prop('disabled', true);
@James Donnely는 새로운 기능으로 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할 수 것처럼 false를 force (ny needs 부트스트스는덕랩에분거로으짓반클).preventDefault여기 참조).
참고: 앵커를 다시 활성화할 때는 이 이벤트를 해제할 필요가 없습니다.간단히 제거합니다..disabled수업이 요령을 부립니다.
물론, 부트스트랩과 jQuery를 사용할 때 매우 일반적인 사용자 지정 클릭 핸들러를 링크에 연결한 경우에는 도움이 되지 않습니다.그래서 이 문제를 해결하기 위해 우리는 다음을 이용할 것입니다.isDisabled()테스트를 위한 확장 기능.disabled클래스, 다음과 같이:
$('#my-anchor').click ->
return false if $(@).isDisabled()
# do something useful
저는 그것이 일을 조금 단순화하는 데 도움이 되기를 바랍니다.
Bootstrap의 JS 버튼과 'loading' 상태를 사용하는 경우 이상한 문제가 발생합니다.왜 이런 일이 일어나는지는 모르겠지만, 여기 그것을 고치는 방법이 있습니다.
버튼이 있고 로드 상태로 설정했다고 가정합니다.
var myButton = $('#myBootstrapButton');
myButton.button('loading');
이제 로드 상태에서 벗어나려고 하지만 비활성화하기도 합니다(예: 버튼이 Save(저장) 버튼이었고 로드 상태가 유효성 검사 중임을 나타냈으며 유효성 검사에 실패했습니다)이것은 합리적인 부트스트랩 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);
});
}});
나를 위해 일하는 것 같습니다.모두 감사합니다!
그런 종류의 동작을 위해 저는 항상 jQuery UI를 사용합니다.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');
답변이 늦었다는 것은 알지만 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;
}
}
다소 늦은 답변이지만, 부스트랩 버튼을 클릭한 후 비활성화하고 멋진 효과(스피너 등)를 추가할 수 있는 방법을 찾다가 이 질문을 우연히 발견했습니다.바로 그런 기능을 하는 훌륭한 도서관을 찾았습니다.
http://msurguy.github.io/ladda-bootstrap/
필요한 css와 js를 포함하고 버튼에 몇 가지 속성을 추가하고 javascript로 lada를 활성화하면 됩니다.Presto! 당신의 단추들은 새로운 삶을 가지고 있습니다 (얼마나 아름다운지 데모를 확인해주세요)!
위의 이것은 때때로 작동하지 않습니다.
$(this).attr('checked') == undefined
코드 조정
if(!$(this).attr('checked') || $(this).attr('checked') == 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>
클릭 가능한 항목을 비활성화하려면 html에 이 항목을 인라인으로 추가할 수도 있습니다.
style="cursor: not-allowed;"
언급URL : https://stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable-enable-buttons-and-links-jquery-bootstrap
'programing' 카테고리의 다른 글
| 용어 메타 WPGrapQL/WooGraphQL을 얻는 방법은? (0) | 2023.07.10 |
|---|---|
| Delphi - SQL 주입 방지 (0) | 2023.07.10 |
| 서버에 연결 대화 상자에서 캐시된 서버 이름을 제거하는 방법은 무엇입니까? (0) | 2023.07.10 |
| R 데이터 파일의 주요 차이점은 무엇입니까? (0) | 2023.07.10 |
| Java: 오라클 데이터베이스에 CLOB를 삽입하는 방법 (0) | 2023.07.10 |