如何在单击按钮时将按钮更改为文本格式 - how to change button into text format when on click the button

how to change button into text format when on click the button

本文关键字：按钮文本格式单击 | 更新日期: 2023-09-27

当点击按钮时，它们是否可能变为仅文本而不是按钮。

例如：

我有所有个人用户的邀请按钮。我需要的是，当点击邀请按钮时，按钮文本不需要更改，而是将按钮更改为文本。

单击按钮时，"邀请"按钮格式将更改为"待处理请求"文本格式以及"取消"按钮。

希望它能有所帮助，这FIDDLE

如果你想了解更多。阅读更多关于jquery的信息。

html

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

脚本

$('#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');
});

试试这个代码：

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

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

如果你有这样的按钮：

<button>Click me</button>

你可以在点击jQuery时禁用它，如下所示：

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

请在此处查看小提琴：http://jsfiddle.net/jpmFS/

或者只替换为这样的文本：

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