Start with a disabled link

Question

I have a selection menu with a link to redirect the client when he / she selects the option that he / she wants. My question is: how can I start with a link disabled via javascript in order to get the client to choose one of the options? Below I insert the code that I have:

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

Thank you for your time.

Answer 1

, URL- href a, URL- . -, , ENROLL 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>

: , href, , , :)

Answer 2

href:

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

Answer 3

href , , :

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

Answer 4

Another approach could be:

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

Answer 5

try fiddle

I used preventDefault()to disablelink

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

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