Question

如果未选中此页面上的复选标记，我正在尝试显示消息 - https://www.hawaiidiscount.com/rental-cars/oahu/honolulu-airport.htm

查看它所说的位置＆＃34;我知道Alamo有额外的费用，在拿车时直接向柜台的Alamo支付。＆＃34;

在静态页面上，下面的脚本可以正常工作（例如，如果您下载页面并将代码放在正文中）。但是当页面生效时，它无法正常工作。

<script>
$('#dnn_ctr367_CartQuickView_anchBookNow').click(function () {
    if (!$('.cartcheckbox').is(':checked')) {
        alert('Please check the box - I\'m aware Alamo has additional fees, paid directly to Alamo at the counter when picking up the vehicle.');
        return false;
    }
});
</script>

知道可能出现什么问题吗？

编辑：当您单击“立即预订”按钮时，会在购物车顶部显示文本（如果您未提供任何所需信息，则会显示该文本）。因此，该文本似乎是忽略上述脚本的程序的一部分。有没有办法让我的脚本在另一个之前激活，所以如果你点击绿色按钮，你会立即看到弹出消息？

Answer 1

这是因为$('.cartcheckbox')不是复选框，而是包含复选框的span

尝试将其更改为复选框的ID（如果您在页面中只有一个复选框，则为input[type="checkbox"]。

如：

$('#dnn_ctr367_CartQuickView_anchBookNow').on('click', function () {
    // update selector below
    if (!$('input[type="checkbox"]').is(':checked')) {
        alert('Please check the box - I\'m aware Alamo has additional fees, paid directly to Alamo at the counter when picking up the vehicle.');
        return false;
    }
});

如果页面上有多个复选框，请尝试将其更改为

if (!$('.cartcheckbox').find('input[type="checkbox"]').is(':checked')) {...}

仅选择相关span

中的复选框

更新了代码以包含触发按钮

$(function() {

  $('#dnn_ctr367_CartQuickView_anchBookNow').on('click', function() {
    // updated selector below    
    if (!$('.cartcheckbox').find('input[type="checkbox"]').is(':checked')) {

      alert('Please check the box - I\'m aware Alamo has additional fees, paid directly to Alamo at the counter when picking up the vehicle.');

      return false;

    } else {
      alert('checkbox is checked');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="cartcheckbox"><input id="dnn_ctr367_CartQuickView_ucCollector_I'mawareAlamohasadditionalfees,paiddirectlytoAlamoatthecounterwhenpickingupthevehicle." type="checkbox" name="dnn:ctr367:CartQuickView:ucCollector:I'mawareAlamohasadditionalfees,paiddirectlytoAlamoatthecounterwhenpickingupthevehicle."></span>
<br/>
<div align="center">
  <a id="dnn_ctr367_CartQuickView_anchBookNow" style="TEXT-DECORATION: none" href="#">
    <button>
      <div class="TBook">Book Now</div>
    </button>
  </a>
</div>

如果未选中复选框，则显示警告消息

1 个答案: