禁用然后启用按钮，禁用为假但在页面上它们仍然被禁用答案

【问题标题】：Disabled then enabled buttons, disabled is false but on the page they are still disabled禁用然后启用按钮，禁用为假但在页面上它们仍然被禁用
【发布时间】：2018-04-10 19:46:19
【问题描述】：

在页面加载时，我使用 jQuery .prop() 禁用了一些按钮，如下所示：

<body onload="bodyLoaded();">
  $( "#show" ).prop("disabled",true);
  $( "#update" ).prop("disabled",true);
  $( "#comebacktothisone" ).prop("disabled",true);
  $( "#review" ).prop("disabled",true);

然后，当按下其他两个按钮之一时，我想启用那些以前禁用的按钮，这是在 onclick 函数中，所以我只想将 disabled 属性设置回 false 一次，而不是每次单击时。 console.log 出现，所以我知道 if 语句有效。但是按钮仍然处于禁用状态：

if($( "#show" ).prop("disabled")){
           console.log("enabled it");
            $( "#show" ).prop("disabled",false);
            $( "#update" ).prop("disabled",false);
            $( "#comebacktothisone" ).prop("disabled",false);
            $( "#review" ).prop("disabled",false);
       }

我也试过这个：

       console.log("enable it ");
        $( "#show" ).prop("disabled",false);
        $("#show").attr("disabled",false);
        $( "#update" ).prop("disabled",false);
        $( "#comebacktothisone" ).prop("disabled",false);
        $( "#review" ).prop("disabled",false);

...按钮仍然是灰色和惰性的。这是怎么回事？

编辑：

var savedQuestions = [];
var answerShown = false;

$( document ).ready(function(){

   console.log('here we go ');

     $( "#nailedit" ).click(function(){
       $.get("QuestionPage",{name:"next",result:"nailed"},function(responseJSON){

           //set the question and category texts
           $("#cardArea").val(responseJSON["card"]);
           $( "#cat"  ).text(responseJSON["category"]);
           $( "#cardid" ).text(responseJSON["flashCardnum"]);

           //clear answer field after every 'next'...
           $( "#answerArea" ).val("");

           //set the click function of show button to show the answer..
           $( "#show" ).click(function() {
                $( "#answerArea" ).val(responseJSON["answer"]); 
                answerShown = true;
            });
       });

       answerShown = false;
       if($( "#show" ).prop("disabled")){
           console.log("enabled it");
            $( "#show" ).prop("disabled",false);
            $( "#show" ).removeAttr('disabled');
            $( "#update" ).prop("disabled",false);
            $( "#comebacktothisone" ).prop("disabled",false);
            $( "#review" ).prop("disabled",false);
       }
   });

   $( "#missedit" ).click(function() {
       $.get("QuestionPage",{name:"next",result:"missed"},function(responseJSON){

           //set the question and category texts
           $("#cardArea").val(responseJSON["card"]);
           $( "#cat"  ).text(responseJSON["category"]);
           $( "#cardid" ).text(responseJSON["flashCardnum"]);

           //clear answer field after every 'next'...
           $( "#answerArea" ).val("");

           //set the click function of show button to show the answer..
           $( "#show" ).click(function() {
                $( "#answerArea" ).val(responseJSON["answer"]); 
                answerShown = true;
            });
       });

       answerShown = false;
       if($( "#show" ).prop("disabled")){
           console.log("enable it ");
            $( "#show" ).prop("disabled",false);
            $( "#show" ).removeAttr('disabled');
            $( "#update" ).prop("disabled",false);
            $( "#comebacktothisone" ).prop("disabled",false);
            $( "#review" ).prop("disabled",false);
       }

   });

  function bodyLoaded() {         
      $( "#show" ).prop("disabled",true);
      $( "#update" ).prop("disabled",true);
      $( "#comebacktothisone" ).prop("disabled",true);
      $( "#review" ).prop("disabled",true);
    }

【问题讨论】：

您应该始终将所有 jQuery 代码插入到 $(document).ready(function() { [all of your code] }); 块中...您这样做了吗？
当然，在<script>标签中包含jquery JS文件，就在<body>结束之前
您的代码看起来不错，应该可以正常工作。您能否在控制台中检查 $('#show') 是否正确检索元素？
所有代码都在 .ready(){} 中，脚本在那里，文件的其余部分工作正常。
我在哪里可以找到那个 John Wink ？

标签： javascript jquery

【解决方案1】：

试试这个

$( "#show" ).removeAttr('disabled');
// for all the elements

【讨论】：

【解决方案2】：

我不知道你是如何实现将按钮重新启用的部分，但它似乎工作得很好，比较你用这个 sn-p 做的事情，看看它是否可以帮助你找到问题，希望对你有帮助

function bodyLoaded(){
  $( "#show" ).prop("disabled",true);
  $( "#update" ).prop("disabled",true);
  $( "#comebacktothisone" ).prop("disabled",true);
  $( "#review" ).prop("disabled",true);
}

$('#someotherbutton').click(function(){
  if($( "#show" ).prop("disabled")){
           console.log("enabled it");
            $( "#show" ).prop("disabled",false);
            
            $( "#update" ).prop("disabled",false);
            $( "#comebacktothisone" ).prop("disabled",false);
            $( "#review" ).prop("disabled",false);
       }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="bodyLoaded();">
<button id="show">show</button>
<button id="update">update</button>
<button id="comebacktothisone">comebacktothisone</button>
<button id="review">review</button>
<button id="someotherbutton">someotherbutton</button>

</body>

【讨论】：

它们不是的，它们是

【解决方案3】：

Jquery ui 让我很困惑，我这样做了，这更简单：

.maxs-button-disabled {
    pointer-events: none;
}

if($( "#show" ).hasClass("maxs-button-disabled")){
           $( "#show" ).removeClass("maxs-button-disabled");
           $( "#update" ).removeClass("maxs-button-disabled");
           $( "#comebacktothisone" ).removeClass("maxs-button-disabled");
           $( "#review" ).removeClass("maxs-button-disabled");
       }

【讨论】：