jQuery에서 비활성화 버튼

내 페이지는로 여러 개의 버튼을 만듭니다 id = 'rbutton_"+i+"'. 아래는 내 코드입니다.

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

자바 스크립트에서

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/

이 코드를 사용해보십시오 :
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");
});

데모

순수한 자바 스크립트가있는 다른 솔루션

<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/#method-disable

이것은 내 의견으로는 가장 간단한 방법입니다.

// 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>

이 시도

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

비활성화 버튼 :

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

활성화 버튼 :

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

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);
}

그게 다야.

다음은 ajax로 수행하는 방법입니다.

$("#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>

어떤 조건에서 버튼을 비활성화하고 싶습니다. 첫 번째 솔루션을 사용하고 있지만 작동하지 않습니다. 그러나 두 번째 것을 사용할 때 작동했습니다. 아래는 브라우저 콘솔의 출력입니다.

1. $ ( '# psl2 .btn-continue'). prop ( "disabled", true)

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

2. $ ( '# psl2 .btn-continue'). attr ( "disabled", "disabled")

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

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

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