jQuery에서 사용 안 함 단추

jQuery에서 사용 안 함 단추

내 페이지는 다음과 같이 여러 개의 단추를 만듭니다.id = 'rbutton_"+i+"'내 코드는 다음과 같습니다.

<button type='button' id = 'rbutton_"+i+"' onclick=disable(i);>Click me</button>

Javascript에서

function disable(i){
    $("#rbutton'+i+'").attr("disabled","disabled");
}

하지만 버튼을 클릭해도 버튼이 비활성화되지 않습니다.

사용하다.prop대신(및 선택기 문자열 정리):

function disable(i){
    $("#rbutton_"+i).prop("disabled",true);
}

생성된 HTML:

<button id="rbutton_1" onclick="disable(1)">Click me</button>
<!-- wrap your onclick in quotes -->

---

그러나 "베스트 프랙티스" 접근법은 JavaScript 이벤트 바인딩을 사용하고this대신:

$('.rbutton').on('click',function() {
    $(this).prop("disabled",true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="rbutton">Click me</button>

http://jsfiddle.net/mblase75/2Nfu4/

이것이 제 생각에 가장 간단한 방법입니다.

// All buttons where id contains 'rbutton_'
const $buttons = $("button[id*='rbutton_']");

//Selected button onclick
$buttons.click(function() {
    $(this).prop('disabled', true); //disable clicked button
});

//Enable button onclick
$('#enable').click(() =>
    $buttons.prop('disabled', false) //enable all buttons
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rbutton_200">click</button>
<button id="rbutton_201">click</button>
<button id="rbutton_202">click</button>
<button id="rbutton_203">click</button>
<button id="rbutton_204">click</button>
<button id="rbutton_205">click</button>
<button id="enable">enable</button>

사용 안 함 단추:

$('#button_id').attr('disabled','disabled');

활성화 버튼:

$('#button_id').removeAttr('disabled');

이 코드를 사용해 보십시오.
HTML

<button type='button' id = 'rbutton_'+i onclick="disable(i)">Click me</button>

기능.

function disable(i){
    $("#rbutton_"+i).attr("disabled","disabled");
}

---

jquery가 있는 다른 솔루션

$('button').click(function(){ 
    $(this).attr("disabled","disabled");
});

데모

---

순수 Javascript를 사용한 다른 솔루션

<button type='button' id = 'rbutton_1' onclick="disable(1)">Click me</button>

<script>
function disable(i){
 document.getElementById("rbutton_"+i).setAttribute("disabled","disabled");
}
</script>

데모2

여기에는 두 가지가 있으며, OP 질문에 따라 가장 높은 투표율의 답변이 기술적으로 맞습니다.

다음과 같이 간략하게 요약됩니다.

$("some sort of selector").prop("disabled", true | false);

하지만 당신이 jQuery UI(OP가 아닌 것은 알지만 여기에 도착하는 일부 사람들은 그럴 수도 있음)를 사용해야 한다면, 그러면 버튼 클릭이 비활성화되는 동안 UI 스타일에 따라 버튼이 비활성화된 것처럼 보이지 않을 것입니다.

jQuery UI 스타일 버튼을 사용하는 경우 다음을 통해 활성화/비활성화해야 합니다.

$("some sort of selector").button("enable" | "disable");

http://api.jqueryui.com/button/ #syslog-disable

사용해 보세요.

function disable(i){
    $("#rbutton_"+i).attr("disabled",true);
}

HTML로 하면 간단히 작동합니다.

<button type="button" id="btn_CommitAll"class="btn_CommitAll">save</button>

JQuery 측에서 비활성화 버튼에 대해 다음 기능을 입력합니다.

function disableButton() {
    $('.btn_CommitAll').prop("disabled", true);
}

활성화 버튼의 경우:

function enableButton() {
    $('.btn_CommitAll').prop("disabled", false);
}

이상입니다.

아약스를 사용한 방법은 다음과 같습니다.

$("#updatebtn").click(function () {
    $("#updatebtn").prop("disabled", true);
    urlToHandler = 'update.ashx';
            jsonData = data;
            $.ajax({
                url: urlToHandler,
                data: jsonData,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    $("#lbl").html(data.response);
                    $("#updatebtn").prop("disabled", false);
                    //setAutocompleteData(data.response);
                },
                error: function (data, status, jqXHR) {
                    alert('There was an error.');
                    $("#updatebtn").prop("disabled", false);
                }
            }); // end $.ajax

이것은 나에게 도움이 됩니다.

<script type="text/javascript">
function change(){
    document.getElementById("submit").disabled = false;
}
</script>

어떤 조건으로 버튼을 비활성화하고 싶은데, 첫 번째 솔루션을 사용하고 있는데 작동하지 않습니다.하지만 두 번째를 사용했을 때는 효과가 있었습니다.다음은 브라우저 콘솔의 출력입니다.

$('#psl2.btn-disabled').prop(사용 안 함), true)

<a class=​"btn btn-yellow btn-continue" href=​"#">​Next​</a>​

$('#psl2.btn-disabled'). 특성 "사용 안 함", "사용 안 함")

<a class=​"btn btn-yellow btn-continue" href=​"#" disabled=​"disabled">​Next​</a>​

Jquery UI 버튼의 경우 다음과 같이 작동합니다.

$("#buttonId").button( "option", "disabled", true | false );

클래스별로 함수를 호출하고 "이" 선택기는 인라인 onClick 기능을 사용하는 것보다 가장 좋은 방법입니다. onclick=disable(i); 여러 버튼에 대해

참고: 비활성화 기능이 필요한 모든 버튼에 동일한 클래스 이름 사용

머리글 또는 js 스크립트 앞에 jQuery CDN 사용

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

방법 1

HTML

<button type='button' class="btnClick" id = 'rbutton_"+i+"'>Click me</button>

제이에스

$('.btnClick').on('click', function(){
    $(this).prop("disabled", true);
})

방법 2

$('.btnClick').on('click', function(){
    disable(this.id)
})

function disable(id) {
    $("#"+id).prop("disabled", true);
}

두 방법 모두 여러 버튼/클릭 시 완벽하게 작동합니다.

#내 코드에 문제가 있거나 잘못된 부분이 있다면 아래에 코멘트 부탁드립니다.

화살표 기능 사용

$('#button-id').on('click', e => $(e.target).prop('disabled', true));

언급URL : https://stackoverflow.com/questions/15122526/disable-button-in-jquery