从禁用链接开始

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>

感谢您的时间。

- Albert

Answer 1

只需不带 href 属性开始：

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

- ED-209

---

这是最好的答案。奥卡姆剃刀原理，最简单的答案通常是正确的。对于最初提问的人，您甚至可以使用一些CSS来使链接被禁用。一旦添加了href，请删除该类。我无法相信有多少答案正在使用JavaScript。 - AtheistP3ace

AtheistP3ace，这个答案仍然需要JavaScript来附加href，所以我不确定你所说的“我无法相信有多少答案在使用JavaScript”是什么意思...他仍然需要JavaScript来重新启用链接！此外，看到他正在使用class="orange_btn"，这告诉我他可能会将链接格式化为按钮。那么为什么不使用真正的按钮呢？您不需要JavaScript来禁用按钮（只需添加属性“disabled”），并且可以使用一行JavaScript轻松启用它。甚至没有CSS，它看起来也很棒！ - Laurens Swart

我认为最好为了SEO和正确的语法目的而使用href。 - Valentin Petkov

@ValentinPetkov一个没有href属性的<a>标签是完全有效的https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element - ED-209

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 属性，因此我不得不稍作修改，以使按钮实际上重定向到所选链接，但上面的示例现在可以工作 :)

- Laurens Swart

---

按钮没有href属性。 - Musa

谢谢你，Musa。我正准备自己试着把‘a’变成灰色，但是我还没想出如何做到 :) - Laurens Swart

我已经更新了示例以解决“按钮没有hrefs”问题。感谢您指出这一点。现在它是一个完全工作的示例。请记住，在此片段预览中，重定向到example.com可能无法正常工作，但如果您将其复制粘贴到您的网站上，它将正常工作！ - Laurens Swart

你应该真的使用一个按钮来完成这种事情 +1 - Musa

完美+1，您可以使用短IF：$("#certificate_enrol_link").prop('disabled',(this.value != "#")?0:1)；prop vs attr jQuery ver https://dev59.com/p3M_5IYBdhLWcg3wWRuV - Valentin Petkov

Answer 3

如果您想要在程序中移除 href 属性，请先不要添加它：

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

- Kurt Van den Branden

Answer 4

另一种方法可能是：

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

- Alex

Answer 5

尝试这个fiddle。

我已经使用了preventDefault()来禁用链接。

$('.link_dis').on('click',function(e){
        e.preventDefault();
})

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

- Siddharth