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时，您必须使用完整的网址，否则您的网址将无效。其次，因为我注意到您的ENROLL NOW a有class="orange_btn",我假设您希望它是提交按钮而不是文本链接。禁用按钮比禁用文本链接容易得多，因此我将其更改为按钮。

这是最后一个工作示例（如果你已经加载了jQuery，我猜你有）：

＆＃13;

$("#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();
})

＆＃13;

<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>

＆＃13;

编辑：正如Musa所指出的那样，按钮不能有href，所以我不得不做一些改动，使按钮实际重定向到所选链接，但上面的例子现在有效：）

Answer 3

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

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

Answer 4

另一种方法可能是：

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

Answer 5

试试这个fiddle

我已使用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

从禁用链接开始

5 个答案: