자바스크립트를 사용하여 HTML 버튼을 비활성화하는 방법은?

자바스크립트를 사용하여 HTML 버튼을 비활성화하는 방법은?

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

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

이 설정은 속성이 아니므로 자바스크립트를 통해 동적으로 추가하여 이전에 활성화된 단추를 비활성화하려면 어떻게 해야 합니까?

이 설정은 속성이 아니므로

속성입니다.

일부 특성은 부울 값으로 정의됩니다. 즉, 값을 지정하고 다른 모든 것을 생략할 수 있습니다.사용 안 함="사용 안 함" 대신 굵게 표시된 부분만 포함합니다.HTML 4에서는 전체 버전이 제한된 지원 기능으로 표시되므로 굵은 글씨 부분만 포함해야 합니다(사양이 작성되었을 때는 그렇지 않습니다).

HTML 5부터는 규칙이 변경되어 이름만 포함하고 값은 포함하지 않습니다.이름과 값이 동일하기 때문에 실질적인 차이는 없습니다.

DOM 속성은 다음과 같이 불리기도 합니다.disabled그리고 다음과 같은 부울입니다.true또는false.

foo.disabled = true;

이론적으로 당신은 또한 할 수 있습니다.foo.setAttribute('disabled', 'disabled');그리고.foo.removeAttribute("disabled")하지만 저는 이것을 오래된 버전의 Internet Explorer(인터넷 익스플로러는 버그가 많기로 악명 높음)와 함께 믿지 않을 것입니다.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의 대답은 사용 가능 및 사용 불가능으로 충분하지만,HTMLInputElement그리고 아마도 IE의 역사적 버그 때문에 크로스 브라우저 호환성을 선호할 것입니다.setAttribute그것은 오직 효과가 있습니다 왜냐하면Element특성 그림자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">

유효합니다.

button , button 객있경우 b:b.disabled=false;

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

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

크로스 브라우저로 잘 작동합니다.

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

속성을 계속 사용할 수 있습니다.'value' 대신 'disabled' 특성을 사용하면 됩니다.

언급URL : https://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript