如何在单击按钮但使用 jquery 禁用时触发按钮上的操作答案

【问题标题】：how to trigger an action on a button when it is clicked but is disabled w/ jquery如何在单击按钮但使用 jquery 禁用时触发按钮上的操作
【发布时间】：2015-11-24 17:00:32
【问题描述】：

编辑：感谢您的回复。根据 Cory 在这里的建议，我将进一步澄清我的目标。表单按钮最终应提交来自选择字段的所有响应，并将它们发送到下一页上的 php 处理。如果用户在每个字段中选择选项之前过早单击提交按钮，则该按钮将不会提交。相反，它会在提交表单下方显示“哇，伙计！你不能带着不完整的表单旅行”。

我已将按钮属性“禁用”默认设置为 true。显然，当按钮具有此属性时，您将无法响应和/或触发有意义的事件。

这是我的 jquery 代码：

$('#generateTrip').prop('disabled', true);
$('#badtripalert').hide();
$("select#rideChoice").change(function() {
  if (($("select#activityChoice").children(":selected").html() === 'Sing karaoke' || $("select#activityChoice").children(":selected").html() === 'Enjoy the view' || $("select#activityChoice").children(":selected").html() === 'Rock out') && ($("select#destinationChoice").children(":selected").html() === 'The Beach' ||
    $("select#destinationChoice").children(":selected").html() === 'The Mountains' || $("select#destinationChoice").children(":selected").html() === 'Outer Space')) {
    $('#generateTrip').prop('disabled', false);
  } else {
    console.log('nothing will happen');
  }
});
$("select#destinationChoice").change(function() {
  if (($("select#rideChoice").children(":selected").html() === 'Hippie Bus' || $("select#rideChoice").children(":selected").html() === 'Rocket Ship' || $("select#rideChoice").children(":selected").html() === 'Unicorn') && ($("select#activityChoice").children(":selected").html() === 'Sing karaoke' ||
    $("select#activityChoice").children(":selected").html() === 'Enjoy the view' || $("select#activityChoice").children(":selected").html() === 'Rock out')) {
    $('#generateTrip').prop('disabled', false);
  } else {
    console.log('nothing will happen');
  }
});
$("select#activityChoice").change(function() {
  if (($("select#rideChoice").children(":selected").html() === 'Hippie Bus' || $("select#rideChoice").children(":selected").html() === 'Rocket Ship' || $("select#rideChoice").children(":selected").html() === 'Unicorn') && ($("select#destinationChoice").children(":selected").html() === 'The Beach' ||
    $("select#destinationChoice").children(":selected").html() === 'The Mountains' || $("select#destinationChoice").children(":selected").html() === 'Outer Space')) {
    $('#generateTrip').prop('disabled', false);
  } else {
    console.log('nothing will happen');
  }
});

<form method="GET" action="dream-trip.php" name="dreanForm" id="dreamTripForm">
  <h4>
                <span>On my dream trip, I’d ride a</span> 
                <select id="rideChoice" name="ride" >
                  <option type="radio" value="0">select</option>
                  <option type="radio" name="rocket ship" value="rocket ship">Rocket Ship</option>
                  <option type="radio" name="hippie bus" value="hippie bus">Hippie Bus</option>
                  <option type="radio" name="unicorn" value="unicorn">Unicorn</option>
                </select>
              </h4>
  <br>
  <h4>
                <span>with my friend to</span> 
                <select id="destinationChoice" name="destination" >
                  <option type="radio" value="0">select</option>
                  <option type="radio" name="the beach" value="the beach">The Beach</option>
                  <option type="radio" name="the mountains" value="the mountains">The Mountains</option>
                  <option type="radio" name="outer space" value="outer space">Outer Space</option>
                </select>
              </h4>
  <h4>
                <span>where we will</span> 
                <select id="activityChoice" name="activity" >
                  <option type="radio" value="0">select</option>
                  <option type="radio" name="singing karaoke" value="singing karaoke">Sing karaoke</option>
                  <option type="radio" name="enjoying the view" value="enjoying the view">Enjoy the view</option>
                  <option type="radio" name="rockin out" value="rockin out">Rock out</option>
                </select>
              </h4>
  <div class="buttonWrap">
    <button type="submit" name="submit" id="generateTrip" class="stronger" data-hover="Take a Trip">Take a Trip</button>
    <p id="badtripalert">whoa dude! ya can't trip w/ an incomplete form</p>
  </div>
</form>

我已尝试触发 onClick 操作，以防在禁用时单击它：

if ($('#generateTrip').prop('disabled') == true) {
  $(this).on('click', function() {
      $('#badtripalert').show();
    }
  }

我也尝试了许多其他解决方案，但它们都集中在基于此属性“已禁用”触发这些解决方案的相同想法上。我认为考虑到它已禁用，我认为它可能与按钮功能中的冲突有关但我不知道....我对 jquery 比较陌生。如果您需要更多详细信息，我会很乐意给他们。在此先感谢您的帮助

我已将按钮属性“禁用”默认设置为 true。显然，当按钮具有此属性时，您将无法响应和/或触发有意义的事件。

【问题讨论】：

禁用的元素将接收或引发任何事件。如果您可以更详细地解释您实际想要实现的目标，我相信有人可以为您提供更有效的解决方案。

标签： javascript jquery html ajax validation

【解决方案1】：

if ($('#generateTrip').prop('disabled') == true) {
    $(this).on('click', function() {
        $('#badtripalert').show();
    }
}

这段代码实际上是在代码执行时，如果属性'disabled'存在，则添加一个onClick事件，可能是一次。想要做的大概是这样的：

$(this).on('click', function() {
    if ($('#generateTrip').prop('disabled') == true) {
        $('#badtripalert').show();
    }
}

不确定这是否可行，如果 Rory McCrossan 所说的是真的，则不会为禁用元素触发 click 事件。

你可以做的是使用一个类。因此，只需在禁用时添加一个类，即“禁用”，然后检查它是否具有该类。

$("select#activityChoice").change(function() {
    if (($("select#rideChoice").children(":selected").html() === 'Hippie Bus' ... )) {
        $('#generateTrip').addClass('disabled');
    } else {
         console.log('nothing will happen');
    }
});

$(this).on('click', function() {
    if ($('#generateTrip').hasClass('disabled')) {
        $('#badtripalert').show();
    }
}

您当然可以根据自己的喜好设置“禁用”类的样式。

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，您应该在按钮上设置一个看起来被禁用的类，而不是将“禁用”属性设置为“真”，然后在按钮的单击事件上设置如果存在“btn-disabled”类，则阻止提交表单。

HTML

<button class="stronger btn-disabled" type="submit" name="submit" id="generateTrip" data-hover="Take a Trip">Take a Trip</button>

CSS

.btn-disabled {
    background-color: #ccc;
    /* etc. */
}

因此，在您的每个“更改”事件中，而不是：

$('#generateTrip').prop('disabled', false);

使用：

$('#generateTrip').removeClass('btn-disabled');

然后，使用以下内容：

JavaScript

$('#generateTrip').on('click', function(evt) {
    if ( $(this).hasClass('btn-disabled') ) {
      evt.preventDefault();
      evt.stopPropagation();

      $('#badtripalert').show();

      return false;
    } else {
        $('#badtripalert').hide();
    }
});

CodePen

http://codepen.io/anon/pen/jboxzJ

【讨论】：