Question

在页面加载时我使用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);
    }

Answer 1

试试这个

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

Answer 2

我不知道你是如何实现将按钮恢复启用的部分，但它似乎工作正常，比较你正在做什么与这个片段，看看它是否有助于你找到问题，希望它帮助

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>

Answer 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");
       }

禁用然后启用按钮，禁用是假的，但在页面上它们仍被禁用

3 个答案: