Start with a link disabled

Question

I have a select menu with a link to redirect the customer once he/she selects the option that he/she wants. My question would be: how I can start with the link disabled with javascript to force the customer to select one of the options? Below I paste 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.

score 7 · Answer 1 · answered Jan 11 '16 at 16:53

7

Just start with no href attribute:

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

answered Jan 11 '16 at 16:53

ED-209

4,558
2
19
25

1

This is the best answer. Occam's Razor, the simplest answer is often correct. And for original person who asked you can even spice it up with some CSS to make it clear the link is disabled. And remove that class once you add the href. I can't believe how many answers are using JavaScript. – AtheistP3ace Jan 11 '16 at 16:56
1

AtheistP3ace, this answer will still require the javascript that appends the href, so I'm not really certain what you mean by "I can't believe how many answers are using JavaScript"... He will still need javascript to re-enable the link! Furthermore, looking at the fact that he's using a class="orange_btn", this tells me he is probably going to format the link as a button. So why not use a real button then? You don't need javascript to disable a button (you just add the attribute 'disabled'), and you can enable it very easily with one line of javascript. It will even look great, without css! – Laurens Swart Jan 11 '16 at 17:11
I think better to have href for SEO and correct syntax purpose. – Valentin Petkov Jan 11 '16 at 18:16
@ValentinPetkov an tag with no href attribute is perfectly valid https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element – ED-209 Jan 11 '16 at 21:37

Laurens Swart · Accepted Answer · 2016-01-11T17:07:22.057

First of all, you would have to use full URLs when appending the href to these a's, because otherwise your URL's will not work. Second, since I noticed your ENROL NOW a has a class="orange_btn", I'm assuming you want it to be a submit button instead of a text link. Disabling a button is a lot easier than disabling a text link, so I changed it into a button for you.

Here is the final working example (provided you have jQuery loaded, which you have, I presume):

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

Edit: as Musa kindly pointed out, buttons cannot have href's, so I had to make a slight alteration to make the button actually redirect to the selected link, but the above example works now :)

Thank you Musa, I was just about to try to do the 'a's in grey myself but I didn't figure out how yet :) — Laurens Swart, Jan 11 '16 at 17:01
I have updated the example to circumvent the "buttons don't have hrefs" problem. Thank you for pointing this out. It's a fully working example now. Keep in mind the redirect to example.com might not work in this snippet preview, but if you copy-paste it to your website, it will work! — Laurens Swart, Jan 11 '16 at 17:08
You should really be using a button for this sort of thing +1 — Musa, Jan 11 '16 at 17:10
perfect +1 you can use short IF $("#certificate_enrol_link").prop('disabled',(this.value != "#")?0:1) ; prop vs attr jQuery ver http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery — Valentin Petkov, Jan 11 '16 at 18:12

Kurt Van den Branden · Answer 3 · 2016-01-11T17:12:16.093

0

Start without the href attribute or, if you want to remove it programmatically use:

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

edited Jan 11 '16 at 17:12

answered Jan 11 '16 at 16:55

Kurt Van den Branden

9,082
8
60
72

score 0 · Answer 4 · answered Jan 11 '16 at 16:57

0

Another approach could be:

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

answered Jan 11 '16 at 16:57

Alex

9,339
2
28
46

score -1 · Answer 5 · answered Jan 11 '16 at 16:59

-1

try this fiddle

i have used preventDefault() to disable the link

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

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

answered Jan 11 '16 at 16:59

Siddharth

838
8
16

Start with a link disabled

5 Answers5