Javascript Disable button when a specific option is selected

Question

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?

Try the following : document.getElementById('btn1').disabled = true; — LearningToCode
– LearningToCode, Commented Jul 27, 2018 at 13:52
You are adding a tag inside the button. the button is getting disabled but the click event is triggered on the <a> tag, not the button. So best way is to add click event to the button and remove the a tag — suhail c
– suhail c, Commented Jul 27, 2018 at 13:59

Syed Kashan Ali · Accepted Answer · 2018-07-27 13:53:20Z

1

Use JS disabled attribute :

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

answered Jul 27, 2018 at 13:53

Syed Kashan Ali

6634 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh · Accepted Answer · 2018-07-27 14:02:05Z

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>

Unmitigated · Accepted Answer · 2018-07-27 14:02:23Z

0

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>

edited Jul 27, 2018 at 14:02

answered Jul 27, 2018 at 13:56

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

3 Comments

suhail c Over a year ago

this will bind multiple click events to the button

Unmitigated Over a year ago

@suhailc Thanks for telling me. I have edited my answer.

suhail c Over a year ago

@hev1 is it better to make a click function outside and get the value of selection inside the function and proceed to the next page.

Negi Rox · Accepted Answer · 2018-07-27 14:04:19Z

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>

Collectives™ on Stack Overflow

Javascript Disable button when a specific option is selected

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related