etc./StackOverFlow

jQuery로 입력을 비활성화/활성화하시겠습니까?

청렴결백한 만능 재주꾼 2021. 11. 13. 00:14
반응형

질문자 :omg


$input.disabled = true;

또는

 $input.disabled = "disabled";

표준 방법은 무엇입니까? 그리고 반대로 비활성화된 입력을 어떻게 활성화합니까?



제이쿼리 1.6+

disabled 속성을 변경하려면 .prop() 함수를 사용해야 합니다.

 $("input").prop('disabled', true); $("input").prop('disabled', false);

jQuery 1.5 이하

.prop() 함수는 존재하지 않지만 .attr() 은 유사합니다.

비활성화된 속성을 설정합니다.

 $("input").attr('disabled','disabled');

.removeAttr() 을 사용하는 것이 적절한 방법입니다.

 $("input").removeAttr('disabled');

모든 버전의 jQuery에서

항상 실제 DOM 개체에 의존할 수 있으며 한 요소만 처리하는 경우 다른 두 옵션보다 약간 빠를 수 있습니다.

 // assuming an event handler thus 'this' this.disabled = true;

.prop() 또는 .attr() 메서드를 사용할 때의 이점은 선택한 항목 묶음에 대한 속성을 설정할 수 있다는 것입니다.


참고: 1.6에는 removeAttr() 과 비슷하게 들리는 .removeProp() 메서드가 있지만 'disabled' 와 같은 기본 속성에는 사용해서는 안 됩니다. 문서에서 발췌:

참고: 이 방법을 사용하여 checked, disabled 또는 selected와 같은 기본 속성을 제거하지 마십시오. 이렇게 하면 속성이 완전히 제거되며 한 번 제거되면 요소에 다시 추가할 수 없습니다. 대신 .prop()를 사용하여 이러한 속성을 false로 설정합니다.

사실, 이 방법에 대한 합법적인 사용이 많이 있는지 의심스럽습니다. boolean props는 1.5의 "속성" 대응물처럼 "제거"하는 대신 false로 설정해야 하는 방식으로 수행됩니다.


gnarf

새로운 규칙을 위해 && 앞으로 적응 가능하게 만들기(ECMA6(????)로 상황이 크게 바뀌지 않는 한:

 $(document).on('event_name', '#your_id', function() { $(this).removeAttr('disabled'); });

그리고

 $(document).off('event_name', '#your_id', function() { $(this).attr('disabled','disabled'); });

geekbuntu

 // Disable #x $( "#x" ).prop( "disabled", true ); // Enable #x $( "#x" ).prop( "disabled", false );

때로는 입력 또는 텍스트 영역과 같은 양식 요소를 비활성화/활성화해야 합니다. Jquery는 disabled 속성을 "disabled"로 설정하여 쉽게 만들 수 있도록 도와줍니다. 예:

 //To disable $('.someElement').attr('disabled', 'disabled');

비활성화된 요소를 활성화하려면 이 요소에서 "disabled" 속성을 제거하거나 문자열을 비워야 합니다. 예:

 //To enable $('.someElement').removeAttr('disabled'); // OR you can set attr to "" $('.someElement').attr('disabled', '');

참조 : http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html


Harini Sekar

$("input")[0].disabled = true;

또는

 $("input")[0].disabled = false;

Sajjad Shirazy

이것을 코드의 전역 어딘가에 넣을 수 있습니다.

 $.prototype.enable = function () { $.each(this, function (index, el) { $(el).removeAttr('disabled'); }); } $.prototype.disable = function () { $.each(this, function (index, el) { $(el).attr('disabled', 'disabled'); }); }

그리고 다음과 같이 작성할 수 있습니다.

 $(".myInputs").enable(); $("#otherInput").disable();

Nicu Surdu

토글 버튼 동작과 같이 현재 상태를 반전시키려는 경우:

 $("input").prop('disabled', ! $("input").prop('disabled') );

daVe

요소를 활성화/비활성화할 수 있는 여러 가지 방법이 있습니다 .

접근법 1

 $("#txtName").attr("disabled", true);

접근법 2

 $("#txtName").attr("disabled", "disabled");

jQuery 1.7 이상 버전을 사용하는 경우 attr() 대신 prop()를 사용하십시오.

 $("#txtName").prop("disabled", "disabled");

요소를 활성화하려면 비활성화하기 위해 수행한 작업과 반대로 수행하면 됩니다. 그러나 jQuery는 속성을 제거하는 또 다른 방법을 제공합니다.

접근법 1

 $("#txtName").attr("disabled", false);

접근법 2

 $("#txtName").attr("disabled", "");

접근 3

 $("#txtName").removeAttr("disabled");

다시 말하지만 jQuery 1.7 이상 버전을 사용하는 경우 attr() 대신 prop()를 사용하십시오. 그거야. 이것이 jQuery를 사용하여 요소를 활성화하거나 비활성화하는 방법입니다.


wild coder

2018년 업데이트:

이제 jQuery가 필요하지 않으며 document.querySelector 또는 document.querySelectorAll (여러 요소의 경우)이 $와 거의 동일한 작업을 수행하고 getElementById , getElementsByClassName , getElementsByTagName

"input-checkbox" 클래스의 한 필드 비활성화

 document.querySelector('.input-checkbox').disabled = true;

또는 여러 요소

 document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

Pawel

jQuery prop() 메서드를 사용하여 jQuery를 사용하여 양식 요소 또는 제어를 동적으로 비활성화하거나 활성화할 수 있습니다. prop() 메서드에는 jQuery 1.6 이상이 필요합니다.

예시:

 <script type="text/javascript"> $(document).ready(function(){ $('form input[type="submit"]').prop("disabled", true); $(".agree").click(function(){ if($(this).prop("checked") == true){ $('form input[type="submit"]').prop("disabled", false); } else if($(this).prop("checked") == false){ $('form input[type="submit"]').prop("disabled", true); } }); }); </script>

SPARTAN

이것은 나를 위해 작동합니다

 $("#values:input").attr("disabled",true); $("#values:input").attr("disabled",false);

Siddhartha

이렇게 사용하고,

 $( "#id" ).prop( "disabled", true ); $( "#id" ).prop( "disabled", false );

Abdus Salam Azad

장애를 입히다:

 $('input').attr('readonly', true); // Disable it. $('input').addClass('text-muted'); // Gray it out with bootstrap.

할 수있게하다:

 $('input').attr('readonly', false); // Enable it. $('input').removeClass('text-muted'); // Back to normal color with bootstrap.

Tomer Ben David

입력 유형에 대해 true 비활성화:

특정 입력 유형의 경우 ( Ex. Text 유형 입력 )

 $("input[type=text]").attr('disabled', true);

모든 유형의 입력 유형에 대해

 $("input").attr('disabled', true);

Hasib Kamal

<html> <body> Name: <input type="text" id="myText"> <button onclick="disable()">Disable Text field</button> <button onclick="enable()">Enable Text field</button> <script> function disable() { document.getElementById("myText").disabled = true; } function enable() { document.getElementById("myText").disabled = false; } </script> </body> </html>

user3831708

@gnarf 답변을 사용하여 기능으로 추가했습니다.

 $.fn.disabled = function (isDisabled) { if (isDisabled) { this.attr('disabled', 'disabled'); } else { this.removeAttr('disabled'); } };

그런 다음 다음과 같이 사용하십시오.

 $('#myElement').disable(true);

Imants Volkovs

2018, JQuery 없이(ES6)

모든 input 비활성화:

 [...document.querySelectorAll('input')].map(e => e.disabled = true);

inputid="my-input"

 document.getElementById('my-input').disabled = true;

문제는 그냥 참고입니다, JQuery와 함께.


rap-2-h

접근법 4 (이것은 와일드 코더 답변의 확장입니다)

 txtName.disabled=1 // 0 for enable
 <input id="txtName">


Kamil Kiełczewski

입력 필드를 비활성화하는 다른 방법은 다음과 같이 jQuery 및 CSS를 사용하는 것입니다.

 jQuery("#inputFieldId").css({"pointer-events":"none"})

동일한 입력을 활성화하는 코드는 다음과 같습니다.

 jQuery("#inputFieldId").css({"pointer-events":""})

mukhtar alam

jQuery 모바일에서:

비활성화

 $('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true); $('#someTextElement').textinput().textinput('disable');

활성화를 위해

 $('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true); $('#someTextElement').textinput('enable');

Atif Hussain

출처 : http:www.stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery

반응형