Question

我这里有一个代码，但是禁用按钮的代码不起作用。

带有链接的按钮

ItemsPanelTemplate

选择选项

ColumnDefinitions

JS代码

   <button id="link-button">
    <a id="link-web" href="" style="text-decoration:none">GO TO LINK</a>
   </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>为什么不起作用？还有另一种方法吗？

Answer 1

使用JS disabled属性：

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

Answer 2

问题是您在a标签内嵌套了button标签，HTML5不允许这样做。按钮不能包含交互式内容。 JSFiddle演示了此：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

使用change添加一个禁用的类，该类将根据选择的新值禁用href标记的a值。

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

这有两件事。首先，锚标签位于按钮元素中第二：锚标记没有禁用的属性。

所以您的代码应该是这样的

 <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>

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

4 个答案: