Twitter의 Bootstrap 버튼을 비활성화하는 가장 좋은 방법

Twitter의 Bootstrap 버튼을 비활성화하는 가장 좋은 방법

이 질문에는 이미 답변이 있습니다.

버튼과 링크를 비활성화/활성화하는 가장 쉬운 방법(jQuery + 부트스트랩) (16개 답변)

닫힘8년 전.

디세블로 하는 것에 대해서는 혼란스럽다.<button>,<input>또는<a>클래스가 있는 요소:.btn또는.btn-primary(JavaScript/jQuery 사용).

그러기 위해 다음과 같은 스니펫을 사용했습니다.

$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);

그래서, 만약 제가 단지$('button').addClass('btn-disabled');내 요소에는 시각적으로 비활성화된 것으로 표시되지만 기능은 그대로 유지되며 클릭할 수 있습니다.그래서 이 기능을 추가한 것입니다.attr그리고.prop설정을 지정합니다.

누가 이 같은 이슈에 대해 설명했나요?이것이 Twitter의 Bootstrap을 사용하면서 하는 올바른 방법입니까?

당신은 단지 필요한 것$('button').prop('disabled', true);part. 버튼을 누르면 자동으로 비활성 클래스가 표시됩니다.

입력 및 버튼의 경우:

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

앵커:

$('a').attr('disabled', true);

파이어폭스, 크롬 확인.

http://jsfiddle.net/czL54/2/ 를 참조해 주세요.

Jeroenk의 답변을 바탕으로 요약하면 다음과 같습니다.

$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally

$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled', true); // Disables visually + functionally

$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually

바이올린을 참조

이를 위한 가장 쉬운 방법은 다음과 같습니다.disabledAtribute는 원래 질문에서 했던 것처럼 다음과 같습니다.

<button class="btn btn-disabled" disabled>Content of Button</button>

현재 Twitter Bootstrap은 버튼의 기능을 비활성화하는 방법을 가지고 있지 않습니다.disabled기여하다.

그럼에도 불구하고, 이것은 그들이 javascript 라이브러리에 구현하기에 매우 좋은 기능입니다.

<div class="bs-example">
      <button class="btn btn-success btn-lg" type="button">Active</button>
      <button class="btn btn-success disabled" type="button">Disabled</button>
</div>

어떤 속성이든 버튼/앵커/링크에 추가되어 비활성화 시킬 수 있습니다.부트스트랩은 스타일을 추가할 뿐이며 사용자는 온클릭 이벤트가 있는 동안에도 클릭할 수 있습니다.따라서 간단한 해결책은 비활성화 여부를 확인하고 클릭 시 이벤트를 제거/추가하는 것입니다.

if (!('#button').hasAttr('disabled'))
 $('#button').attr('onclick', 'someFunction();');
else
 $('#button').removeattr('onclick');

언급URL : https://stackoverflow.com/questions/17327668/best-way-to-disable-button-in-twitters-bootstrap