Отключить кнопку после нажатия в JQuery

Моя кнопка использует AJAX для добавления информации в базу данных и изменения текста кнопки. Однако я хочу, чтобы кнопка была отключена после одного щелчка (иначе человек может спамить информацию в базе данных). Как мне это сделать?

HTML

<button class="btn btn-lg btn-primary" id='roommate_but' onclick='load(<?php echo $user_id;?>)'><span class="glyphicon glyphicon-plus"></span> Add Person</button>

Javascript/AJAX/JQuery

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

function load(recieving_id){                                    
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    } else{
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
            document.getElementById("roommate_but").innerHTML =  xmlhttp.responseText;


        }

    }

xmlhttp.open('GET','include.inc.php?i=' + recieving_id, true);

xmlhttp.send();


}

javascript button jquery ajax disabled-input
person user3377126    schedule 11.05.2014    source источник
comment
У вас действительно есть jQuery на странице? Я спрашиваю, потому что, хотя вы отметили этот вопрос jQuery, в вашем коде не используется jQuery. Таким образом, ответы могут сильно различаться в зависимости от того, можете ли вы использовать jQuery или нет.   -  person Steve    schedule 12.05.2014
comment
Да, я использую JQuery. Я отредактировал свой исходный пост, чтобы показать ссылку на JQuery. Любые предложения по отключению кнопки после одного клика?   -  person user3377126    schedule 12.05.2014
comment
Пожалуйста, не используйте простой XHR, если вы уже используете jQuery. Крайне некрасиво смешивать оба.   -  person ThiefMaster    schedule 12.05.2014

Ответы (3)


arrow_upward
36
arrow_downward

*Обновлено

jQuery версия будет выглядеть примерно так:

function load(recieving_id){
    $('#roommate_but').prop('disabled', true);
    $.get('include.inc.php?i=' + recieving_id, function(data) {
        $("#roommate_but").html(data);
    });
}
person Manoj Yadav    schedule 11.05.2014
comment
Когда я добавил его в функцию загрузки, кнопка по-прежнему активна, и она остановила свою функцию, чтобы добавить что-то в базу данных и изменить текст кнопки. Какое-то конкретное место для этого кода, чтобы убедиться, что он работает с кнопками и другими функциями? - person user3377126; 12.05.2014
comment
После ajax успеха удалите disabled, ответ обновлен - person Manoj Yadav; 12.05.2014
comment
Я заменил всю функцию загрузки вашей функцией загрузки (поэтому заменив AJAX на Jquery), и она по-прежнему не отключает кнопку после одного щелчка (все еще можно щелкнуть). Тем не менее, он по-прежнему может делать то же самое, что и AJAX, переходить на другую страницу, добавлять что-то в базу данных и изменять текст кнопки. Если это поможет, я использую кнопку начальной загрузки. Что-нибудь, что я еще могу сделать? - person user3377126; 12.05.2014
comment
Если вы хотите отключить кнопку после одного клика, удалите $('#roommate_but').prop('disabled', false);, ответ обновлен - person Manoj Yadav; 12.05.2014
comment
Вы получите гораздо больше положительных отзывов, если сделаете этот ответ более общим для заголовка вопроса: кнопка «Отключить» после нажатия в JQuery, которая отображается как лучший результат в Google. Включите информацию об отключении непосредственно в ответ, например /. - person Andrew; 15.12.2015

arrow_upward
32
arrow_downward

Вы можете сделать это в jquery, установив для атрибута disabled значение «отключено».

$(this).prop('disabled', true);

Я сделал простой пример http://jsfiddle.net/4gnXL/2/.

person kplates    schedule 11.05.2014
comment
Вы должны знать, когда использовать attr и когда использовать prop. Это должно быть сделано с помощью prop. Подробнее об этом можно прочитать здесь. - person Adam Merrifield; 12.05.2014
comment
Да, я думаю, Адам прав. Когда я попробовал этот код: $('roommate_but').click(function(){ $(this).attr('disabled','disabled'); }); , кнопка все еще не была отключена. Так что мне просто нужно изменить attr на prop, верно? В какое-то определенное место я могу поместить кнопку, чтобы заставить ее работать? Если это поможет, я на самом деле использую кнопку начальной загрузки - person user3377126; 12.05.2014
comment
-1 за использование attr, хотя .prop() существует уже много лет. Однако оба варианта должны работать. - person ThiefMaster; 12.05.2014
comment
Принятое к сведению @PeterSmith будет обновляться. @ user337712 $('roommate_but') должно быть $('#roommate_but') - person kplates; 12.05.2014
comment
И как вы отключаете кнопку и сохраняете ее стили, потому что attr disabled часто имеет правило opacity css. - person DiDebru; 13.11.2018
comment
Посмотрите здесь. Вам потребуется перезаписать отключенный псевдокласс developer.mozilla.org /en-US/docs/Web/CSS/:disabled - person kplates; 14.11.2018

arrow_upward
1
arrow_downward

Рассмотрите также .attr()

$("#roommate_but").attr("disabled", true); работал на меня.

person HappyHands31    schedule 14.12.2020