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

时间:2013-07-18 06:39:30

标签: php jquery html

点击按钮时,它们是否可能只有文本而不是按钮。

例如:

我为所有个人用户设置了邀请按钮。我需要的是当点击“邀请”按钮时,按钮文本无需更改而是按钮更改为文本。

“邀请”按钮格式更改为“待处理请求”文本格式,并在单击按钮时更改为“取消”按钮。

4 个答案:

答案 0 :(得分:1)

希望它有所帮助,这 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');
});

答案 1 :(得分:0)

试试这段代码:

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

如果您有这样的按钮:

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