javascript - 버튼 - js prop disabled



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

2018, JQuery없이 (ES6)

모든 input 사용 중지 :

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

id="my-input" 사용 중지

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

질문은 JQuery를 사용하는 것입니다. 단지 참고 용입니다.

$input.disabled = true;

또는

$input.disabled = "disabled";

표준 방법은 어느 것입니까? 반대로 입력을 비활성화하려면 어떻게합니까?


Answer #1

jQuery 1.6 이상

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

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

jQuery 1.5 이하

.prop() 함수는 존재하지 않지만 .attr() .prop() 함수는 비슷합니다.

disabled 속성을 설정합니다.

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

다시 사용하려면 올바른 방법은 .removeAttr() 을 사용하는 .removeAttr()

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

모든 버전의 jQuery

실제 DOM 객체를 항상 의지 할 수 있으며 하나의 요소 만 처리하는 경우 다른 두 옵션보다 약간 빠릅니다.

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

.prop() 또는 .attr() 메서드를 사용할 때의 이점은 선택한 항목을 .prop() 할 수 있다는 것입니다.

참고 : 1.6에서는 removeAttr() 과 많이 비슷하게 들리는 ' .removeProp() 메서드가 있지만 'disabled' 와 같은 네이티브 속성에는 사용하지 않아야 합니다. 문서에서 발췌 :

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

실제로, 나는이 방법에 대한 많은 합법적 인 사용이 의심 스럽다. 부울 소품은 1.5에서 "속성"대응 물과 같이 "제거"하는 대신 false로 설정해야한다.


Answer #2

@gnarf 대답을 사용하여 함수로 추가했습니다.

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

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

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

Answer #3

jQuery Mobile :

사용 불가

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

사용 가능

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

Answer #4

그냥 새로운 관습을 위해서 & 앞으로 적응할 수 있도록 (ECMA6 (??)으로 크게 변화하지 않는 한) :

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

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

Answer #5

당신은 당신의 코드에 이것을 어딘가에 넣을 수 있습니다 :

$.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();

Answer #6

요소를 사용 / 사용 중지 할 수있는 몇 가지 방법이 있습니다 .

접근법 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를 사용하여 모든 요소를 ​​활성화 또는 비활성화하는 방법입니다.


Answer #7

이처럼 사용하십시오.

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

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

Answer #8

입력 유형에 대해 true 사용 안함 :

특정 입력 유형 ( 예 : 텍스트 유형 입력 )의 경우,

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

모든 유형의 입력 유형

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

Answer #9
    // 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


Answer #10
<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>




html-input