选择特定选项时禁用Javascript按钮

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?

Answer 1

使用JS 禁用属性：

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

Answer 2

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> 

Answer 3

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> 

Answer 4

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>