Question

我正在开发适用于Android的Phonegap Build应用。我用onclick创建了两个按钮，触发了doHelper功能，该功能将禁用后面的按钮。但由于某些原因，即使在点击按钮之前，按钮也始终处于禁用状态。

这是我的代码。

HTML：

 <div class="gameHelper">
     <div class="row">
     <div class="twelve columns">
         <button  onclick="doHelper('skip')" class="skipAnswer button helperButtons">
             Skip
         </button>

         <button onclick="doHelper('remove')" class="removeOneAnswer button helperButtons">
              Remove 1
          </button>
      </div>
  </div>

JS：

function doHelper(helperName) {

    if (helperName == 'skip') {

        var classVar = '.skipAnswer';
        skipAnswerUsed = true;
        $(classVar).attr('disabled', 'disabled');
        $(classVar).css('background-color', 'red');
        submitAnswer(activeNumber);

    } else if (helperName == 'remove') {
        var classVar = '.removeOneAnswer';
        removeOneAnswerUsed = true;
        $(classVar).attr('disabled', 'disabled');
        $(classVar).css('background-color', 'red');
    }

}

css：

.helperButtons {
    width: 49%;
    background-color: green;
    color: white;
}

Answer 1

我建议您从 JS 中分离 HTML 。

这可以通过事件处理程序完成。由于您已经在使用jQuery，因此可以采用以下方法：

$('button.skipAnswer').on('click', function () {
   doHelper("skip");
});

$('button.removeOneAnswer').on('click', function () {
   doHelper("remove");
});

https://jsfiddle.net/9jczt3uu/

Answer 2

您使用的是Firefox吗？可能这就是问题，我前段时间也有同样的问题......

您可以通过添加

来修复它

$(document).ready(function(){
    $(".button").removeAttr('disabled');
});

Answer 3

您的HTML和Javascript是正确的。可能还有另一个问题。

Answer 4

尝试这种方式

function doHelper(helperName) {
                    $('button').removeAttr('disabled')
                    $('button').css('background-color', '');
                    if (helperName == 'skip') {

                        var classVar = '.skipAnswer';
                        skipAnswerUsed = true;
                        $(classVar).attr('disabled', '');
                        $(classVar).attr('disabled', 'disabled');
                        $(classVar).css('background-color', 'red');
                        submitAnswer(activeNumber);

                    } else if (helperName == 'remove') {

                        var classVar = '.removeOneAnswer';
                        $(classVar).attr('disabled', '');
                        removeOneAnswerUsed = true;
                        $(classVar).attr('disabled', 'disabled');
                        $(classVar).css('background-color', 'red');
                    }
                }

index.html中始终禁用按钮标记

4 个答案: