单击按钮时如何将按钮更改为文本格式

Is their any possible when on click the button it change to only text and not as a button.

Ex:

I have Invite button for all individual user. What I need is when on click the Invite button, button text need not to change instead button is change to text.

"Invite" button format is change to "pending request" text format along with "cancel" button when on click the button.

Try this code :

$('button').click(function() {
    $(this).replaceWith("pending request<button>cancel</button>")
})

$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'pending request...');
//add cancel button
 });

If you have a button like this:

<button>Click me</button>

You can disable it on click with jQuery like this:

$(function() {
  $('button').on('click', function(e) {
    e.preventDefault();       
    $(this).prop('disabled', 'disabled');
  });
});

See fiddle here: http://jsfiddle.net/jpmFS/

Or replace it with only text like this:

$(function() {
 $('button').on('click', function(e) {
    e.preventDefault();       
    $(this).replaceWith('<p>'+$(this).text()+'</p>');
 });
});

Hope it helps, this FIDDLE

if you want to learn more. read more about jquery.

html

<input id="invite" type="button" value="Invite" />
<span id="pending">Pending</span>
<input id="cancel" type="button" value="Cancel" />

script

$('#pending').hide();
$('#cancel').hide();

$('#invite').on('click', function () {
    $(this).hide('fast');
    $('#pending').show('fast');
    $('#cancel').show('fast');
});

$('#cancel').on('click', function () {
    $(this).hide('fast');
    $('#pending').hide('fast');
    $('#invite').show('fast');
});