Question

I have a link I need to disable until a selection is made from a select box

<select id="shippingSelect" onchange="simpleCart.update();">
                    <option value="nothing" selected="selected">Choose Shipping Location</option>
                    <option value="uk">UK - FREE</option>
                    <option value="world">Rest of World + £2.00</option>
                </select>

<a href="javascript:;" class="simpleCart_checkout"> Place Order </a>

How can I disable the place order link until customer chooses shipping location?

This is what I have at the moment:

<script>
    $('#shippingSelect').change(function() {
       if ($(this).val() != "nothing") {

          $('.place_order').slideDown();
       } else {
          $('.place_order').slideUp();

       }
    });
    </script> 

Which works but I would rather have the link visible all the time just not clickable. Thanks

Answer 1

On your link handler you could check if something different to nothing was selected

 $('a.simpleCart_checkout').click(function(e) {
     if ($('#shippingSelect').val() == 'nothing') {
        e.preventDefault(); // disable link navigation
     }        
     // your logic for the case that something is selected
 });

In any case, it would be better if add some visual indication that the link is disabled like font in gray or something and you remove it when a valid element is selected on the combo box.

Another approach that take link style into account

HTML

<a href="javascript:;" class="simpleCart_checkout disabled"> Place Order </a>

CSS

.disabled
{ 
    color: #AAA
}

​
JS

$('#shippingSelect').change(function() {
   if ($(this).val() == "nothing") {
      $('a.simpleCart_checkout').addClass('disabled');
   } 
   else {
      $('a.simpleCart_checkout').removeClass('disabled');
   }
});

$('a.simpleCart_checkout').click(function(e) {
    if ($(this).hasClass('disabled')) {
       e.preventDefault(); // disable link navigation
    }        
    // your logic for the case that something is selected
});

DEMO 2nd APPROACH