CODEWITHSUNDEEP
javascript
rubz
rubz

Reputation: 45

Javascript Disable button when a specific option is selected

I have a code here but the code for disabling the button is not working.

Button with link

   <button id="link-button">
    <a id="link-web" href="" style="text-decoration:none">GO TO LINK</a>
   </button>

Select Option

<select id="website" onchange='selecWeb(this)'>
  <option>Search Engine</option>
  <option value="https://google.com">Google</option>
  <option value="https://yahoo.com">Yahoo</option>
  <option value="https://bing.com">Bing</option>
 </select>

JS Code

function selecWeb(a){
    var val = a.value;

    if(a.options[a.selectedIndex].text== "Search Engine")
    {
        $('#link-button').prop('disabled', true);
    }
    else
    {
        $('#link-button').prop('disabled', false);
        document.getElementById('link-web').href = val;
    }
}

Why prop('disabled', true) is not working? Is there another way?

Upvotes: 0

Views: 1651

Answers (4)

Negi Rox
Negi Rox

Reputation: 3922

here are two things. first that : anchor tag is inside a button element second: anchor tag doesn't have disabled property.

so your code be something like this

 <button id="link-button">GO TO LINK</button>
 <select id="website" onchange='selecWeb(this)'>
            <option>Search Engine</option>
            <option value="https://google.com">Google</option>
            <option value="https://yahoo.com">Yahoo</option>
            <option value="https://bing.com">Bing</option>
  </select>
<script>
function selecWeb(a) {
        var val = a.value;

        if (a.options[a.selectedIndex].text == "Search Engine") {
            $('#link-button').prop('disabled', true);
        }
        else {
            $('#link-button').prop('disabled', false);
            document.getElementById('link-web').href = val;
        }
    }
 </script>

Upvotes: 0

Unmitigated
Unmitigated

Reputation: 89204

The problem is that you have nested an a tag inside a button tag, which is not allowed by HTML5. A button can not contain interactive content. JSFiddle demonstrating this: http://jsfiddle.net/ykv695en/

function selecWeb(a){
    var val = a.value;

    if(val == "SearchEngine")
    {
        $('#link-button').prop('disabled', true);
    }
    else
    {
        $('#link-button').prop('disabled', false);
        $('#link-button').off();
       $('#link-button').click(function(){
        location.href = val;
       });
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="link-button">
    GO TO LINK
   </button>
   <select id="website" onchange='selecWeb(this)'>
  <option value="SearchEngine">Search Engine</option>
  <option value="https://google.com">Google</option>
  <option value="https://yahoo.com">Yahoo</option>
  <option value="https://bing.com">Bing</option>
 </select>

Upvotes: 0

Josh
Josh

Reputation: 1474

Using change add a disabled class that will disable the href value of the a tag based on the selects new value.

$('#website').change(function(event) {
  if($(this).val() === 'Search Engine') {
    $('#link-button a').addClass('is-disabled');
  } else {
    $('#link-button a').removeClass('is-disabled');
    $('#link-button a').attr('href', $(this).val());
  }
});
a.is-disabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="link-button">
  <a id="link-web" class="is-disabled" href="" style="text-decoration:none">GO TO LINK</a>
</button>

<select id="website">
  <option>Search Engine</option>
  <option value="https://google.com">Google</option>
  <option value="https://yahoo.com">Yahoo</option>
  <option value="https://bing.com">Bing</option>
</select>

Upvotes: 0

Syed Kashan Ali
Syed Kashan Ali

Reputation: 663

Use JS disabled attribute : 

document.getElementById("id").disabled = true;

Upvotes: 1

Related Questions