2023年5月25日 21:38:48go评论74阅读模式

英文:

Edit disabled status of bootstrap switch

问题

以下是您要翻译的内容：

"Anybody knows how to style the bootstrap switch button when it's disabled? I managed to style it for enabled status but for disabled it still gets dark as a bootstrap default effect. I'd like to have it the same appearance for disabled than for enabled.

In addition, how could I check if it's enabled or disabled and make the words "annually" or "monthly" bold depending on that? Thanks!

.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
}

.form-check-input[type="checkbox"]:disabled + .form-check-label::before {
    background-color: #5382FB;
    border-color: #5382FB;
    opacity: 1;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<div class="d-flex justify-content-center align-items-center">
    <div class="monthly me-3">Monthly</div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    </div>
    <div class="annually ms-3">Annually</div>
</div>

英文:

Anybody knows how to style the bootstrap switch button when it's disabled? I managed to style it for enabled status but for disabled it still gets dark as a bootstrap default effect. I'd like to have it the same appearance for disabled than for enabled.

In addition, how could I check if it's enabled or disabled and make the words "annually" or "monthly" bold depending on that? Thanks!

.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
}

.form-check-input[type=&quot;checkbox&quot;]:disabled + .form-check-label::before {
    background-color: #5382FB;
    border-color: #5382FB;
    opacity: 1;
}

&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot; integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;d-flex justify-content-center align-items-center&quot;&gt;
    &lt;div class=&quot;monthly me-3&quot;&gt;Monthly&lt;/div&gt;
    &lt;div class=&quot;form-check form-switch&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; role=&quot;switch&quot; id=&quot;flexSwitchCheckDefault&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;annually ms-3&quot;&gt;Annually&lt;/div&gt;
&lt;/div&gt;

答案1

得分: 1

Disabled这里用词不对。应该是checked（选中）或unchecked（未选中）。要使这些词变粗，需要使用JS并监听按钮的change事件。

示例：

document.getElementById('switch').addEventListener('change', () => {
  const switchBtn = document.getElementById('switch');
  const monthly = document.getElementById('monthly');
  const annually = document.getElementById('annually');
  if (switchBtn.checked) {
    annually.classList.toggle('fw-bold');
    monthly.classList.toggle('fw-bold');
  } else {
    annually.classList.toggle('fw-bold');
    monthly.classList.toggle('fw-bold');
  }
});

.form-check.form-switch .form-check-input {
  box-shadow: none;
  cursor: pointer;
  height: 20px;
  width: 40px;
  background-color: #5382FB;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<div class="d-flex justify-content-center align-items-center">
    <div id="monthly" class="me-3 fw-bold">Monthly</div>
    <div class="form-check form-switch" id="switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    </div>
    <div id="annually" class="ms-3">Annually</div>
</div>

英文:

Disabled is the wrong word here. It is checked or unchecked and to make the words bold you need JS and listen for the change event of the button.

Example:

document.getElementById(&#39;switch&#39;).addEventListener(&#39;change&#39;, () =&gt; {
  const switchBtn = document.getElementById(&#39;switch&#39;);
  const monthly = document.getElementById(&#39;monthly&#39;);
  const annually = document.getElementById(&#39;annually&#39;);
  if (switchBtn.checked) {
    annually.classList.toggle(&#39;fw-bold&#39;);
    monthly.classList.toggle(&#39;fw-bold&#39;);
  } else {
    annually.classList.toggle(&#39;fw-bold&#39;);
    monthly.classList.toggle(&#39;fw-bold&#39;);
  }
});

.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
  background-image: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;-4 -4 8 8&#39;%3e%3ccircle r=&#39;3&#39; fill=&#39;%23fff&#39;/%3e%3c/svg%3e&quot;)
}

&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot; integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;d-flex justify-content-center align-items-center&quot;&gt;
    &lt;div id=&quot;monthly&quot; class=&quot;me-3 fw-bold&quot;&gt;Monthly&lt;/div&gt;
    &lt;div class=&quot;form-check form-switch&quot; id=&quot;switch&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; role=&quot;switch&quot; id=&quot;flexSwitchCheckDefault&quot;&gt;
    &lt;/div&gt;
    &lt;div id=&quot;annually&quot; class=&quot;ms-3&quot;&gt;Annually&lt;/div&gt;
&lt;/div&gt;

答案2

得分: 0

我用jQuery整理了它。我对id也弄错了：

// PLANS SWITCH BUTTONS

$("#switch-1").on('change', function() {
  if($(this).is(':checked')) {
    $('#price-1').html('499€')
    $('#monthly-1').css({'font-weight':'400', 'text-decoration':'none'})
    $('#annually-1').css({'font-weight':'700', 'text-decoration':'underline'})
  }
  else {
    $('#price-1').html('599€')
    $('#monthly-1').css({'font-weight':'700', 'text-decoration':'underline'})
    $('#annually-1').css({'font-weight':'400', 'text-decoration':'none'})
  }
});

.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
}

.form-check-input[type="checkbox"]:disabled + .form-check-label::before {
    background-color: #5382FB;
    border-color: #5382FB;
    opacity: 1;
} 

.annually {
  text-decoration: underline;
  font-weight: 700;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<div class="d-block m-auto">
    <div class="d-flex justify-content-center"><span id="price-1">499€</span></div>
    <div class="d-flex justify-content-center"><span class="mb-2">/ month</span></div>
    <div class="d-flex justify-content-center align-items-center">
        <div id="monthly-1" class="monthly text-end">Monthly</div>
        <div class="form-check form-switch mx-2 p-0 d-flex justify-content-center">
            <input class="form-check-input m-auto" type="checkbox" role="switch" id="switch-1" checked>
        </div>
        <div id="annually-1" class="annually">Annually</div>
    </div>
</div>

英文:

I have sorted it out with jQuery. I was mistaken with the ids as well:

// PLANS SWITCH BUTTONS

$(&quot;#switch-1&quot;).on(&#39;change&#39;, function() {
  if($(this).is(&#39;:checked&#39;)) {
    $(&#39;#price-1&#39;).html(&#39;499€&#39;)
    $(&#39;#monthly-1&#39;).css({&#39;font-weight&#39;:&#39;400&#39;, &#39;text-decoration&#39;:&#39;none&#39;})
    $(&#39;#annually-1&#39;).css({&#39;font-weight&#39;:&#39;700&#39;, &#39;text-decoration&#39;:&#39;underline&#39;})
  }
  else {
    $(&#39;#price-1&#39;).html(&#39;599€&#39;)
    $(&#39;#monthly-1&#39;).css({&#39;font-weight&#39;:&#39;700&#39;, &#39;text-decoration&#39;:&#39;underline&#39;})
    $(&#39;#annually-1&#39;).css({&#39;font-weight&#39;:&#39;400&#39;, &#39;text-decoration&#39;:&#39;none&#39;})
  }
});

.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
}

.form-check-input[type=&quot;checkbox&quot;]:disabled + .form-check-label::before {
    background-color: #5382FB;
    border-color: #5382FB;
    opacity: 1;
} 

.annually {
  text-decoration: underline;
  font-weight: 700;
}

&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot; integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;d-block m-auto&quot;&gt;
    &lt;div class=&quot;d-flex justify-content-center&quot;&gt;&lt;span id=&quot;price-1&quot;&gt;499€&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;d-flex justify-content-center&quot;&gt;&lt;span class=&quot;mb-2&quot;&gt;/ month&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;d-flex justify-content-center align-items-center&quot;&gt;
        &lt;div id=&quot;monthly-1&quot; class=&quot;monthly text-end&quot;&gt;Monthly&lt;/div&gt;
        &lt;div class=&quot;form-check form-switch mx-2 p-0 d-flex justify-content-center&quot;&gt;
            &lt;input class=&quot;form-check-input m-auto&quot; type=&quot;checkbox&quot; role=&quot;switch&quot; id=&quot;switch-1&quot; checked&gt;
        &lt;/div&gt;
        &lt;div id=&quot;annually-1&quot; class=&quot;annually&quot;&gt;Annually&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

编辑禁用状态的Bootstrap开关。

问题

答案1

答案2

如何在Blazor Server中更新重新启动CSS

Close Search overlay only if inputs have no error.

display: none 或 block; 为什么会移除我的CSS中的网格功能？

如何减小 flex MUI 网格之间的间隙？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论