添加/单击c＃asp .net mvc5后，禁用并更改按钮图标

Question

单击/添加对象后，我想更改按钮图标并禁用按钮。 我认为可以使用javascript完成此处理。

像这样的东西：

--javascript--

  $('#catBut').click(function(){
  $(this).find('span')
       .toggleClass('glyphicon glyphicon-plus')
       .toggleClass('glyphicon glyphicon-ok'); 
  })

;

- 视图 -

@using (Html.BeginForm("Add", "VerlangLijst", new { naam = materiaal.Naam }, FormMethod.Post))
{
    <button id="catBut" type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-plus"></span>
    </button>
}

但是不知何故，它不起作用。 我已经将新的.js文件添加到bundleConfig中。

有人可以告诉我怎么了吗？

谢谢

Answer 1

尝试改变

$(this).find('span').toggleClass('glyphicon glyphicon-plus').toggleClass('glyphicon glyphicon-ok');

至

$(this).find('span').addClass('glyphicon-ok').removeClass('glyphicon-plus');

禁用按钮：

$('#catBut').prop("disabled",true);

Answer 2

要禁用该按钮，请尝试以下操作：

$('#catBut').click(function(){
    $(this).find('span').toggleClass('glyphicon-plus').toggleClass('glyphicon-ok'); 
    $('#catBut').prop("disabled", true);
});

这将从按钮中删除“加号”图标，添加“确定”图标，并在按钮“ catBut”上设置disabled = true，从而将其禁用。

您也可以尝试（如果以上解决方案无效）：

$(document).on("click", "#catBut", function(){
    $('#catBut').find('span').removeClass('glyphicon-plus').addClass('glyphicon-ok'); 
    $('#catBut').prop("disabled", true);
});

要么

$(document).on("click", "#catBut", function(){
    $('#catBut').find('span').toggleClass('glyphicon-plus').toggleClass('glyphicon-ok'); 
    $('#catBut').prop("disabled", true);
});