JavaScript를 사용하여 HTML 버튼을 비활성화하는 방법은 무엇입니까?

disable다음과 같이 태그에 속성 을 추가 하지 않고 단순히 HTML 버튼 을 태그 에 추가 하여 비활성화 할 수 있습니다 (물리적으로 클릭 할 수 없음) .

<input type="button" name=myButton value="disable" disabled>

이 설정은 속성이 아니므로 JavaScript를 통해 동적으로 추가하여 이전에 활성화 된 버튼을 비활성화하려면 어떻게해야합니까?

이 설정은 속성이 아니므로

속성입니다.

일부 속성은 부울로 정의되므로 값을 지정하고 다른 모든 속성을 생략 할 수 있습니다. 즉, disabled = " disabled " 대신 굵은 체 만 포함합니다. HTML 4에서는 정식 버전이 제한된 지원 기능으로 표시되므로 굵게 표시된 부분 만 포함 해야 합니다 (현재 사양이 작성된 시점에서는 덜 사실임).

HTML 5부터 규칙이 변경되었으며 이제 값이 아닌 이름 만 포함합니다. 이름과 값이 동일하므로 실질적인 차이는 없습니다.

DOM 속성은 라고도 disabled하고 소요 부울입니다 true또는 false.

foo.disabled = true;

이론적으로 당신은 또한 수 foo.setAttribute('disabled', 'disabled');와 foo.removeAttribute("disabled"), 그러나 나는 (이에 관해서 버그 악명 있습니다 인터넷 익스플로러의 이전 버전이 믿지 않을 것이다 setAttribute).

비활성화

document.getElementById("btnPlaceOrder").disabled = true; 

사용하려면

document.getElementById("btnPlaceOrder").disabled = false; 

그것은 속성이지만 부울 속성입니다 (따라서 이름이 필요없고 값 만 필요합니다. 이상합니다). Javascript에서 동등한 속성을 설정할 수 있습니다.

document.getElementsByName("myButton")[0].disabled = true;

다음을 시도하십시오 :

document.getElementById("id").setAttribute("disabled", "disabled");

에 disabled속성 을 설정하는 공식적인 방법 HTMLInputElement은 다음과 같습니다.

var input = document.querySelector('[name="myButton"]');
// Without querySelector API
// var input = document.getElementsByName('myButton').item(0);

// disable
input.setAttribute('disabled', true);
// enable
input.removeAttribute('disabled');

@kaushar의 답변 은을 활성화 및 비활성화하기에 충분 하지만 HTMLInputElementIE의 역사적으로 버그 setAttribute가 있기 때문에 브라우저 간 호환성에 바람직하지만 Element속성 속성은 shadow Element속성 이기 때문에 작동 합니다. 속성이 설정되면 DOM은 기본적으로 해당 속성 값 대신 속성 값을 사용합니다.

속성과 속성 간에는 매우 중요한 차이점이 있습니다. 실제의 예 HTMLInputElement 속성 이며 input.value, 아래의 방법 그림자 작품을 보여줍니다

var input = document.querySelector('#test');

// the attribute works as expected
console.log('old attribute:', input.getAttribute('value'));
// the property is equal to the attribute when the property is not explicitly set
console.log('old property:', input.value);

// change the input's value property
input.value = "My New Value";

// the attribute remains there because it still exists in the DOM markup
console.log('new attribute:', input.getAttribute('value'));
// but the property is equal to the set value due to the shadowing effect
console.log('new property:', input.value);

<input id="test" type="text" value="Hello World" />

이것이 속성이 그림자 속성이라는 것을 의미합니다. 이 개념은 prototype체인의 상속 된 속성에도 적용됩니다 .

function Parent() {
  this.property = 'ParentInstance';
}

Parent.prototype.property = 'ParentPrototype';

// ES5 inheritance
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

function Child() {
  // ES5 super()
  Parent.call(this);

  this.property = 'ChildInstance';
}

Child.prototype.property = 'ChildPrototype';

logChain('new Parent()');

log('-------------------------------');
logChain('Object.create(Parent.prototype)');

log('-----------');
logChain('new Child()');

log('------------------------------');
logChain('Object.create(Child.prototype)');

// below is for demonstration purposes
// don't ever actually use document.write(), eval(), or access __proto__
function log(value) {
  document.write(`<pre>${value}</pre>`);
}

function logChain(code) {
  log(code);

  var object = eval(code);

  do {
    log(`${object.constructor.name} ${object instanceof object.constructor ? 'instance' : 'prototype'} property: ${JSON.stringify(object.property)}`);
    
    object = object.__proto__;
  } while (object !== null);
}

이것이 속성과 속성의 차이점에 대한 혼란을 분명히하기를 바랍니다.

여전히 속성입니다. 설정 :

<input type="button" name=myButton value="disable" disabled="disabled">

... 유효하다.

b라는 버튼 객체가있는 경우 : b.disabled=false;

가장 좋은 방법은 다음과 같습니다.

$("#ctl00_ContentPlaceHolder1_btnPlaceOrder").attr('disabled', true);

브라우저간에 잘 작동합니다.

<button disabled=true>text here</button>

여전히 속성을 사용할 수 있습니다. 'value'대신 'disabled'속성을 사용하십시오.