从禁用链接开始

Question

我有一个带有链接的选择菜单，一旦客户选择了他/她想要的选项，就可以重定向他/她。我的问题是：如何从用javascript禁用链接开始，迫使客户选择其中一个选项？下面我粘贴我的代码：

<select name="dept" class="select_type" id="PT_Certificate_options">
    <option value="#">Select Study Option</option>
    <option value="mydomain.com/option1">Distance</option>
    <option value="mydomain.com/option2">Part Time</option>
    <option value="mydomain.com/option3">Full Time</option>
</select>
<a id="certificate_enrol_link" href="#" class="orange_btn">ENROL NOW</a>
<script type="text/javascript">
    $("#PT_Certificate_options").change(function () {
        console.log(this.value);
        $("#certificate_enrol_link").attr('href', this.value);
    });
</script>

谢谢你抽出时间。

Answer 1

只需从没有href属性开始：

<a id="certificate_enrol_link" class="orange_btn">ENROL NOW</a>

Answer 2

首先，在将href附加到这些a时，必须使用完整的URL，否则您的URL将无法工作。其次，由于我注意到您的ENROL NOW a有一个class="orange_btn",，我假设您希望它是一个提交按钮，而不是文本链接。禁用按钮比禁用文本链接容易得多，所以我为您将其更改为按钮。

这里是最后一个工作示例（假设您已经加载了jQuery，我想您已经加载）：

$("#PT_Certificate_options").change(function() {
  console.log(this.value);
  if (this.value != "#") {
    $("#certificate_enrol_link").prop('disabled', false)
  } else {
    $("#certificate_enrol_link").prop('disabled', true)
  }
});
$("#certificate_enrol_link").click(function() {
  window.location.href = $('#PT_Certificate_options').val();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dept" class="select_type" id="PT_Certificate_options">
  <option value="#">Select Study Option</option>
  <option value="http://example.com/option1">Distance</option>
  <option value="http://example.com/option2">Part Time</option>
  <option value="http://example.com/option3">Full Time</option>
</select>
<button id="certificate_enrol_link" href="#" class="orange_btn" disabled>ENROL NOW</button>

编辑：正如Musa善意地指出的，按钮不能有href，所以我不得不做一个轻微的修改，使按钮实际上重定向到所选的链接，但上面的例子现在有效：）

Answer 3

另一种方法可能是：

$('#certificate_enrol_link').click(function(event) {
  if ('#' == $(this).attr('href')) {
    alert("Please select an option!");
    return false;
  }
});

Answer 4

在没有href属性的情况下启动，或者，如果您想以编程方式删除它，请使用：

$("#certificate_enrol_link").removeAttr("href")

Answer 5

试试这个小提琴

我使用了preventDefault()到disable链路

$('.link_dis').on('click',function(e){
        e.preventDefault();
})
  <a id="certificate_enrol_link" class="link_dis"href="#" class="orange_btn">ENROL NOW</a