Fatal编程技术网
  • javascript/
  • 为什么'；当我使用css时，禁用按钮的javascript代码不起作用吗？

为什么'；当我使用css时，禁用按钮的javascript代码不起作用吗？

javascript html css

为什么'；当我使用css时，禁用按钮的javascript代码不起作用吗？,javascript,html,css,Javascript,Html,Css,我在html中定义了一个按钮，如下所示： <button type="button" id="btnStart" onclick="startCallMonitoring()">Start Call Monitoring</button> 但是按钮没有被禁用 代码如下： <!DOCTYPE HTML> <html> <head> <style> button { display: inline-blo

我在html中定义了一个按钮，如下所示：

<button type="button" id="btnStart" onclick="startCallMonitoring()">Start Call Monitoring</button>
但是按钮没有被禁用

代码如下：

<!DOCTYPE HTML>
<html>
  <head>
     <style>
button {
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin: 0;
    text-decoration: none;
    background: #0069ed;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button:hover,
button:focus {
    background: #0053ba;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}

#calls {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#calls td, #calls th {
  border: 1px solid #ddd;
  padding: 8px;
}

#calls tr:nth-child(even){background-color: #f2f2f2;}

#calls tr:hover {background-color: #ddd;}

#calls th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #ff8000;
  color: white;
}
</style>
<script type="text/javascript">

function setup() {
  document.getElementById("btnStop").disabled = true;
}

function startCallMonitoring(){
  document.getElementById("btnStart").disabled = true;
  document.getElementById("btnStop").disabled = false;
}

function stopCallMonitoring() {
  document.getElementById("btnStart").disabled = false;
  document.getElementById("btnStop").disabled = true;
}

</script>

</head>
<body onload="setup()">

  <button type="button" id="btnStart" onclick="startCallMonitoring()">Start Call Monitoring</button>
  <button type="button" id="btnStop" onclick="stopCallMonitoring()">Stop Call Monitoring</button>
<hr>
<table id="calls">
    <thead>
        <tr>
          <th>Date</th>
             <th>Time added to table</th>
             <th>CallerID</th>
             <th>link</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>
<hr>

</body>
</html>
但按钮并没有被禁用。我做错了什么

但是，当我删除css时，它确实可以工作

例如，使用相同的代码但不使用css：

<!DOCTYPE HTML>
<html>
  <head>
<script type="text/javascript">

function setup() {
  document.getElementById("btnStop").disabled = true;
}

function startCallMonitoring(){
  document.getElementById("btnStart").disabled = true;
  document.getElementById("btnStop").disabled = false;
}

function stopCallMonitoring() {
  document.getElementById("btnStart").disabled = false;
  document.getElementById("btnStop").disabled = true;
}

</script>

</head>
<body onload="setup()">

  <button type="button" id="btnStart" onclick="startCallMonitoring()">Start Call Monitoring</button>
  <button type="button" id="btnStop" onclick="stopCallMonitoring()">Stop Call Monitoring</button>
<hr>
<table id="calls">
    <thead>
        <tr>
          <th>Date</th>
             <th>Time added to table</th>
             <th>CallerID</th>
             <th>link</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>
<hr>

</body>
</html>


函数设置（）{
document.getElementById（“btnStop”）.disabled=true；
}
函数startCallMonitoring（）{
document.getElementById（“btnStart”）.disabled=true；
document.getElementById（“btnStop”）.disabled=false；
}
函数stopCallMonitoring（）{
document.getElementById（“btnStart”）.disabled=false；
document.getElementById（“btnStop”）.disabled=true；
}
启动呼叫监控
叫停监控


日期
添加到表中的时间
来电显示
链接
禁用功能工作正常。单击
.btnStart
时发出警报，您将看到第二次单击时它将不起任何作用->按钮被禁用：


钮扣{
显示：内联块；
边界：无；
填充：1rem2rem；
保证金：0；
文字装饰：无；
背景：#0069ed；
颜色：#ffffff；
字体系列：无衬线；
字号：1rem；
光标：指针；
文本对齐：居中；
过渡：背景250ms缓进缓出，
变换150ms；
-webkit外观：无；
-moz外观：无；
}
按钮：悬停，
按钮：焦点{
背景#0053ba；
}
/*禁用的按钮样式*/
按钮：禁用，
按钮：禁用：悬停{
不透明度：.7；
背景：#0069ed；
}
按钮：焦点{
外形：1px实心#fff；
轮廓偏移量：-4px；
}
按钮：激活{
变换：比例（0.99）；
}
#召唤{
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
#呼叫td，#呼叫th{
边框：1px实心#ddd；
填充：8px；
}
#调用tr:n个子（偶数）{背景色：#f2f2；}
#调用tr:hover{background color:#ddd；}
#呼叫th{
填充顶部：12px；
垫底：12px；
文本对齐：左对齐；
背景色：#ff8000；
颜色：白色；
}
函数设置（）{
document.getElementById（“btnStop”）.disabled=true；
}
函数startCallMonitoring（）{
警报（“测试”）；
document.getElementById（“btnStart”）.disabled=true；
document.getElementById（“btnStop”）.disabled=false；
}
函数stopCallMonitoring（）{
document.getElementById（“btnStart”）.disabled=false；
document.getElementById（“btnStop”）.disabled=true；
}
启动呼叫监控
叫停监控


日期
添加到表中的时间
来电显示
链接
是什么让你认为它没有被禁用？似乎在Chrome中为我禁用了（它变灰了）您正在覆盖按钮的样式。如果这就是你的意思，它看起来也不会有什么不同。@NickParsons正在使用css示例或第二个示例。它在第二个示例中确实起作用。@FelixKling你是说单击实际上被禁用了，但它看起来没有被禁用吗？@AngusComber css示例（第一个示例）。也许你认为它不是因为悬停/聚焦样式而被禁用的？您可以使用
按钮：悬停：启用
和
按钮：焦点：启用
仅在按钮启用（即：未禁用）时应用悬停/焦点样式您是否介意更新您的答案以显示如何编辑css，以便在禁用时禁用动画。您可以使用
按钮：disabled
选择器添加特定样式。我用UI；）的示例更新了代码 
let o = document.getElementById("btnStart");
alert(o.disabled);  // says false
o.disabled = true;
alert(o.disabled);  // says true

<!DOCTYPE HTML>
<html>
  <head>
<script type="text/javascript">

function setup() {
  document.getElementById("btnStop").disabled = true;
}

function startCallMonitoring(){
  document.getElementById("btnStart").disabled = true;
  document.getElementById("btnStop").disabled = false;
}

function stopCallMonitoring() {
  document.getElementById("btnStart").disabled = false;
  document.getElementById("btnStop").disabled = true;
}

</script>

</head>
<body onload="setup()">

  <button type="button" id="btnStart" onclick="startCallMonitoring()">Start Call Monitoring</button>
  <button type="button" id="btnStop" onclick="stopCallMonitoring()">Stop Call Monitoring</button>
<hr>
<table id="calls">
    <thead>
        <tr>
          <th>Date</th>
             <th>Time added to table</th>
             <th>CallerID</th>
             <th>link</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>
<hr>

</body>
</html>