사용하지 않도록 설정하는 가장 쉬운 방법은 무엇입니까 / 사용 버튼과 링크 (jQuery를 + 부트 스트랩)

해결법

1.버튼은 브라우저에 의해 처리되는 버튼 속성 장애인으로 해제 간단하다 :

버튼은 브라우저에 의해 처리되는 버튼 속성 장애인으로 해제 간단하다 :
```
<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의 소품 () 메소드를 사용합니다 것입니다 :
```
$('button').prop('disabled', true);
$('button').prop('disabled', false);
```
즉 장애인 지적 그것의 가치는 앵커 태그의 유효한 특성이 아닙니다. 이러한 이유로, 부트 스트랩은 .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 클래스는 앵커 태그를 사용할 수 표시하기 위해 필요한 것입니다.
```
<a href="http://example.com" class="btn">My Link</a>
```
물론,이 클릭 할 때 기능에서 링크를 방지 할 수 없습니다. 위의 링크를 http://example.com 우리를 취할 것입니다. 이를 방지하기 위해, 우리는에서는 event.preventDefault ()를 호출하는 장애인 클래스와 목표 앵커 태그에 jQuery 코드의 간단한 조각에 추가 할 수 있습니다 :
```
$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});
```
우리는 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 장애인 링크 데모.

우리는 우리가 비활성화입니다 () 사용하여 시도하고 요소의 유형을 확인 위에 만들어진 이전 디스 에이블 기능을 확장 할 수 있습니다. 이런 식으로 우리가 할 수있는 toggleClass ()는 입력 또는 버튼 요소가 아닌 경우, 또는 장애인 특성 토글이있는 경우 :
```
// 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 데모.

그것의 가치는 더 위의 함수는 모든 입력 유형에 작동 할 것이라고 지적.

2.나는 간단한 / 쉬운 방법을 생각할 수 없다! ;-)

나는 간단한 / 쉬운 방법을 생각할 수 없다! ;-)

사용 앵커 태그 (링크) :

<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');

3., 텍스트 필드가 버튼을 제출 가정

, 텍스트 필드가 버튼을 제출 가정
```
<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>
```
어떤 버튼을 사용하지 않으려면, 예를 들어, 당신은 그냥 disabled 속성을 추가 할 필요가 버튼을 제출
```
$('input[type="submit"]').attr('disabled','disabled');
```
선 위에 실행 한 후, 당신과 같을 것이다 버튼 HTML 태그를 제출
```
<input type="submit" class="btn" value="Submit" disabled/>
```
'장애인'속성이 추가되었습니다 알 수 있습니다.

이러한 텍스트 필드에 텍스트를 가지고 때와 같이 버튼을 활성화하십시오. 당신은, 같은 버튼을 사용하려면 사용 안 함 속성을 제거해야합니다
```
 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }
```
이제 위의 코드는 '장애인'속성을 제거합니다.
4.나는 파티에 늦었 알고 있지만 구체적으로 두 가지 질문에 대한 답변 :

나는 파티에 늦었 알고 있지만 구체적으로 두 가지 질문에 대한 답변 :

"난 그냥 그래서 비활성화 특정의 르 달아주세요-것을 원하는 :

이 얼마나 단단 할 수있다? "

그들은 클릭을 중지

<버튼> 또는 <입력 유형 = "버튼">와 같은 버튼 1. 당신은 속성을 추가 사용할 수 없습니다.
```
<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>
```
2. 링크를 들어, 어떤 링크가 ... 실제로 어떤 HTML 요소는, 당신은 CSS3 포인터 이벤트를 사용할 수 있습니다.
```
.selector { pointer-events:none; }
```
포인터 이벤트에 대한 브라우저 지원은 예술 (5/12/14)의 현재의 상태로 굉장합니다. 그러나 우리는 일반적으로 IE의 영역에서 지원 기존의 브라우저에있는 IE10 있도록 DO NOT 지원 포인터 이벤트 아래 : http://caniuse.com/pointer-events. 여기에 다른 사람에 의해 언급 된 자바 스크립트 솔루션 중 하나를 사용하여 그래서 기존 브라우저에 갈 수있는 방법이 될 수 있습니다.

포인터 이벤트에 대한 자세한 정보 :

그들은 장애인 봐

그래서 분명히 이것을 CSS의 대답 :

<버튼> 또는 와 같은 버튼의 1. [특성] 선택기를 사용
```
button[disabled] { ... }

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

여기에 내가 여기에 언급 된 물건과 함께 기본적인 데모입니다 : http://jsfiddle.net/bXm5B/4/

도움이 되었기를 바랍니다.
5., 나처럼, 당신은 단지 버튼을 사용하지 않으려면, 미묘하게이 긴 스레드에 숨겨진 간단한 대답을 놓치지 마세요 :

, 나처럼, 당신은 단지 버튼을 사용하지 않으려면, 미묘하게이 긴 스레드에 숨겨진 간단한 대답을 놓치지 마세요 :
```
 $("#button").prop('disabled', true);
```
6.@ 제임스 도넬리는 새로운 기능을 jQuery를 확장에 의존하는 포괄적 인 답을 공급하고 있습니다. 나는 그것이 내가 그것을 필요로하는 방식으로 작동하므로 자신의 코드에 적응하기 위하여려고하고있다, 그래서 즉, 좋은 생각이다.

@ 제임스 도넬리는 새로운 기능을 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()
```
이 코드는 하나의 요소 또는 요소들의리스트를 처리한다.

버튼 및 입력은 true로 설정하면, 그들은 장애인 (부트 스트랩 덕분에) 모양 및 클릭 할 때 발생하지 않습니다, 장애인 속성을 지원합니다.

앵커는 우리가 그들 (다시 부트 스트랩 감사) 및 기본 클릭 이벤트를 연결 장애인을 보이도록 .disabled 클래스에 의존하는거야 그래서 대신 사용할 속성을 지원하지 않는 방지로 preventDefault에 대해 false (필요를 반환하지로 클릭 여기를 보아라).

참고 : 앵커를 다시 사용할 때이 이벤트를 갈고리에서 벗기는 할 필요가 없습니다. 단순히 .disabled 클래스를 제거하는 것은 트릭을 수행합니다.

이 링크에 사용자 정의 클릭 핸들러, 부트 스트랩 및 jQuery를 사용하는 경우 매우 일반적인 무언가를 부착 한 경우 물론,이 도움이되지 않습니다. 그래서 우리는 접근 금지 사용이 같은 .disabled 클래스에 대한 테스트에 isDisabled () 확장을하려고이 처리합니다 :
```
$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # do something useful
```
나는 조금 단순화 가지 도움이되기를 바랍니다.
7.당신은 부트 스트랩의 JS 버튼을 사용하는 경우 이상한 문제와 '로딩'상태가 있음을 참고. 나는 이런 이유를 알고 있지만,이를 해결하는 방법은 없습니다.

당신은 부트 스트랩의 JS 버튼을 사용하는 경우 이상한 문제와 '로딩'상태가 있음을 참고. 나는 이런 이유를 알고 있지만,이를 해결하는 방법은 없습니다.

당신이 버튼이 있고로드 상태로 설정 말 :
```
var myButton = $('#myBootstrapButton');
myButton.button('loading');
```
이제 로딩 상태의 그것을 먹고 싶어하지만, 또한 비활성화합니다 (예를 들어, 버튼이 저장 버튼이고, 로딩 상태를 지속적으로 확인을 표시하고 검증 실패). 합리적인 부트 스트랩 JS 같은이 외모 :
```
myButton.button('reset').prop('disabled', true); // DOES NOT WORK
```
불행하게도,이 버튼을 다시, 그러나 그것을 사용하지 않을 것입니다. 분명히, 버튼 ()을 일부 지연 작업을 수행합니다. 당신은 또한 당신의 비활성화를 연기해야합니다 그래서 :
```
myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);
```
A는 성가신 비트,하지만 내가 많이 사용하고 패턴입니다.

8.멋진 대답 모든 기여! 나는 선택 요소 해제 등 약간이 기능을 확장했다 :

멋진 대답 모든 기여! 나는 선택 요소 해제 등 약간이 기능을 확장했다 :

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);
    });
}});

나를 위해 일하게 될 것으로 보인다. 모두 감사합니다!

9.난 항상 jQueryUI 버튼 위젯을 사용 행동의 종류를 위해, 나는 링크와 버튼을 위해 사용합니다.

난 항상 jQueryUI 버튼 위젯을 사용 행동의 종류를 위해, 나는 링크와 버튼을 위해 사용합니다.

HTML 내에서 태그를 정의합니다 :
```
<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>
```
버튼을 초기화하기 위해 jQuery를 사용하여
```
$("#sampleButton").button();
$("#linkButton").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 클래스 (변경 한 경우) 너무 다른 위젯의 스타일을 변경합니다.
10.내 대답은 늦게 알아,하지만 IMO 이것은 버튼 '사용'버튼을 전환 할 수있는 가장 쉬운 방법은 '사용 안 함'입니다

내 대답은 늦게 알아,하지만 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;
  }
}
```
11.다음은 아주 잘 나를 위해 일했다 :

다음은 아주 잘 나를 위해 일했다 :
```
$("#button").attr('disabled', 'disabled');
```
12.이것은을 클릭 한 후 비활성화 부트 스트랩 버튼에 대한 방법을 검색하고 어쩌면 (스피너 f.e) 멋진 효과를 추가하는 동안 그러나 나는이 질문에 우연히, 다소 늦게 대답이다. 나는 정확히 않는 큰 라이브러리를 발견했습니다 :

이것은을 클릭 한 후 비활성화 부트 스트랩 버튼에 대한 방법을 검색하고 어쩌면 (스피너 f.e) 멋진 효과를 추가하는 동안 그러나 나는이 질문에 우연히, 다소 늦게 대답이다. 나는 정확히 않는 큰 라이브러리를 발견했습니다 :

http://msurguy.github.io/ladda-bootstrap/

당신은 필요한 CSS와 JS, 자바 스크립트 ... 프레스토와 LADA 당신의 버튼에 몇 가지 속성을 추가하고 사용을 포함! 귀하의 버튼 (그것이 얼마나 아름다운 볼 수있는 데모를 확인하십시오) 새로운 삶을!
13.이것은 위의 때때로 때문에 작동하지 않습니다

이것은 위의 때때로 때문에 작동하지 않습니다
```
$(this).attr('checked') == undefined
```
당신의 코드를 조정
```
if(!$(this).attr('checked') || $(this).attr('checked') == false){
```

14.당신은 같은 페이지에서 다음과 같은 버튼이 있다고 가정 :

당신은 같은 페이지에서 다음과 같은 버튼이 있다고 가정 :

<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");
    }
}

15.현재 활성화되는이 같은 그 모습을 말해봐.

현재 활성화되는이 같은 그 모습을 말해봐.
```
<button id="btnSave" class="btn btn-info">Save</button>
```
그냥이 추가 :
```
$("#btnSave").prop('disabled', true);
```
당신은 버튼을 비활성화 할이를 얻을 것이다
```
<button id="btnSave" class="btn btn-primary" disabled>Save</button>
```
16.당신이 클릭을 사용하지 않으려면, 당신은 또한 HTML이 인라인 추가 할 수 있습니다

당신이 클릭을 사용하지 않으려면, 당신은 또한 HTML이 인라인 추가 할 수 있습니다
```
style="cursor: not-allowed;"
```

from https://stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable-enable-buttons-and-links-jquery-bootstrap by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] CORS POST 요청을 jQuery를 함께 일반 자바 스크립트에서 작동하지만, 왜? (0)	2020.10.14
[JQUERY] 자바 스크립트 / jQuery를 사용하여 Excel로 내보내기 HTML 테이블 데이터는 크롬 브라우저에서 제대로 작동하지 않습니다 (0)	2020.10.14
[JQUERY] 터치 장치 자바 드래그 앤 드롭 [폐쇄] (0)	2020.10.14
[JQUERY] jQuery로 이스케이프 키에 대한 어떤 키 코드 (0)	2020.10.14
[JQUERY] 텍스트에서 모든 공백을 제거 (0)	2020.10.14

복붙노트

[JQUERY] 사용하지 않도록 설정하는 가장 쉬운 방법은 무엇입니까 / 사용 버튼과 링크 (jQuery를 + 부트 스트랩)

사용하지 않도록 설정하는 가장 쉬운 방법은 무엇입니까 / 사용 버튼과 링크 (jQuery를 + 부트 스트랩)

해결법

1.버튼은 브라우저에 의해 처리되는 버튼 속성 장애인으로 해제 간단하다 :

2.나는 간단한 / 쉬운 방법을 생각할 수 없다! ;-)

3., 텍스트 필드가 버튼을 제출 가정

4.나는 파티에 늦었 알고 있지만 구체적으로 두 가지 질문에 대한 답변 :

5., 나처럼, 당신은 단지 버튼을 사용하지 않으려면, 미묘하게이 긴 스레드에 숨겨진 간단한 대답을 놓치지 마세요 :

7.당신은 부트 스트랩의 JS 버튼을 사용하는 경우 이상한 문제와 '로딩'상태가 있음을 참고. 나는 이런 이유를 알고 있지만,이를 해결하는 방법은 없습니다.

8.멋진 대답 모든 기여! 나는 선택 요소 해제 등 약간이 기능을 확장했다 :

9.난 항상 jQueryUI 버튼 위젯을 사용 행동의 종류를 위해, 나는 링크와 버튼을 위해 사용합니다.

10.내 대답은 늦게 알아,하지만 IMO 이것은 버튼 '사용'버튼을 전환 할 수있는 가장 쉬운 방법은 '사용 안 함'입니다

11.다음은 아주 잘 나를 위해 일했다 :

12.이것은을 클릭 한 후 비활성화 부트 스트랩 버튼에 대한 방법을 검색하고 어쩌면 (스피너 f.e) 멋진 효과를 추가하는 동안 그러나 나는이 질문에 우연히, 다소 늦게 대답이다. 나는 정확히 않는 큰 라이브러리를 발견했습니다 :

13.이것은 위의 때때로 때문에 작동하지 않습니다

14.당신은 같은 페이지에서 다음과 같은 버튼이 있다고 가정 :

15.현재 활성화되는이 같은 그 모습을 말해봐.

16.당신이 클릭을 사용하지 않으려면, 당신은 또한 HTML이 인라인 추가 할 수 있습니다

'JQUERY' 카테고리의 다른 글

티스토리툴바