更改禁用按钮的颜色

Question

我有一个带有表单和2个输入（一个下拉列表和一个复选框）的应用程序。 这两个输入是必需的，以便能够单击“提交”按钮（使用javascript函数即可完成工作）

该按钮当前带有某些CSS时为红色，即使已禁用，我也希望禁用时为灰色，否则为红色。

这项工作似乎很简单，但是我对javascript有问题，它不起作用。

我尝试过：

var sbt_btn = document.querySelector('button#submit_button');
function coloration_button(){
   if(sbt_btn.disabled  == true){
     sbt_btn.style.background = 'grey';
   }
  else { 
     sbt_btn.style.background = 'red';
   }
}

但是它不起作用。 我也尝试过：

var sbt_btn_att = document.querySelector('button#submit_button').getAttribute('disabled');
var sbt_btn = document.querySelector('button#submit_button');
    function coloration_button(){
       if(sbt_btn_att.disabled  == true){
         sbt_btn.style.background = 'grey';
       }
      else { 
         sbt_btn.style.background = 'red';
       }
    }

控制台不通知某些错误或其他错误。

如果有人可以帮助我 这是使用所有JavaScript和CSS的代码笔。

CodePen

预先感谢

/* => prerequisites: JQuery library 2.1.3 */


/* variable declaration */
var menu = document.querySelector('.nav__list');
var burger = document.querySelector('.burger');
var doc = $(document);
var l = $('.scrolly');
var panel = $('.panel');
var vh = $(window).height();

var openMenu = function() {
  document.querySelector('.burger').classList.toggle('burger--active');
  /*equivalent: 	burger.classList.toggle('burger--active');*/
  document.querySelector('.nav__list').classList.toggle('nav__list--active');
  /*equivalent: 	menu.classList.toggle('nav__list--active');*/
};

/* reveal content of first panel by default*/
panel.eq(0).find('.panel__content').addClass('panel__content--active');

var scrollFx = function() {
  var ds = doc.scrollTop();
  var of = vh / 4;

  /* if the panel is in the viewport, reveal the content, if not, hide it.*/
  for (var i = 0; i < panel.length; i++) {
    if (panel.eq(i).offset().top < ds + of ) {
      panel
        .eq(i)
        .find('.panel__content')
        .addClass('panel__content--active');
    } else {
      panel
        .eq(i)
        .find('.panel__content')
        .removeClass('panel__content--active')
    }
  }
};

var scrolly = function(e) {
  e.preventDefault();
  var target = this.hash;
  var $target = $(target);

  $('html, body').stop().animate({
    'scrollTop': $target.offset().top
  }, 300, 'swing', function() {
    window.location.hash = target;
  });
}

var init = function() {
  document.querySelector('.burger').addEventListener('click', openMenu, false);
  /*equivalent:	burger.addEventListener('click', openMenu, false);*/
  window.addEventListener('scroll', scrollFx, false);
  window.addEventListener('load', scrollFx, false);
  $('a[href^="#"]').on('click', scrolly);
};

doc.on('ready', init);

/* Loader Between Page
   ========================================================================== */
/*simple function to retrieve element by its id */
function getId(id) {
  return document.getElementById(id);
}
/* 	id1 the button id
	id2 the loader id */
function validation(id1, id2) {
  getId(id1).style.display = "none";
  getId(id2).style.display = "";
  return true;
}





/* Form of the unlock screen
   ========================================================================== */
/* Hide/show the unlock mode
========================================================================== */
/*Declare the current screen as a and the unlock screen as b.*/
var a = document.querySelector("#current");
var b = document.querySelector("#debug_mode");

/* declare the button in the navigation pan as btn */
var btn = document.querySelector("#debug_mode_btn");

/* add an event on this button. On click on it: */
btn.addEventListener("click", function myfunction() {
  sty = document.querySelector("#debug_mode_btn");
  /* if the unlock mode is hide, then: 
  	-	reveal it, 
  	-	switch colors of the button
  	- 	hide the current screen */
  if (b.style.display == 'none') {
    sty.style.background = 'red';
    sty.style.color = "#2b3033";
    b.style.display = 'block';
    a.style.display = 'none';
  }
  /* else if unlock mode is already visible, hide it, reveal the current screen, and reswitch the color of the button*/
  else {
    sty.style.background = '#2b3033';
    sty.style.color = 'red';
    b.style.display = 'none';
    a.style.display = 'block';
  }
});

/* Hide/show the corresponding form based on the value of the select drop down list in the unlock mode.
   ========================================================================== */
var previous_debug_form;
var c = document.querySelector("#debug_selector");

c.addEventListener("change", function myfunction_display() {

  var debug_form = document.querySelector('#debug_selector');

  if (previous_debug_form) {
    previous_debug_form.style.display = "none";
  }
  var debug_id = debug_form.value;
  if (debug_id) {
    var debug_form = document.querySelector('#' + debug_id);
    debug_form.style.display = "block";
    previous_debug_form = debug_form;
  }
});


/* Form in the current page
   ========================================================================== */
/* Function to allow only one checkbox to be checked */
function selectOnlyThis(id) {
  for (var i = 1; i <= 4; i++) {
    if ("Check" + i === id && document.getElementById("Check" + i).checked === true) {
      document.getElementById("Check" + i).checked = true;

    } else {
      document.getElementById("Check" + i).checked = false;
    }
  }
}

/* Function to remove the disabled property of the submit button */
function callFunction() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');

  var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
  document.querySelectorAll('button[type="submit"]')[0].disabled = true;
  /*equivalent for input submit button:  document.querySelectorAll('input[type="submit"]')[0].disabled = true; */
  if (checkedOne) {
    document.querySelectorAll('button[type="submit"]')[0].disabled = false;
    document.querySelector('#submit_button').style.background = 'rgba(230,0,39,1.1);';
    /*equivalent for input submit button:	document.querySelectorAll('input[type="submit"]')[0].disabled = false; */
  }
}





var sbt_btn = document.querySelector('button#submit_button').getAttribute('disabled');

function coloration_buton() {
  if (sbt_btn == true) {

  } else if (sbt_btn == false) {

  }

}

ul {
  color: black;
  list-style-type: none;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: left;
  align-content: space-around;
}

#bu_prompt {
  width: auto;
}

label {
  color: black;
}

.prompt {
  width: 45%;
}




html {
  min-height: 100%;
  font-family: sans-serif;
}

.bg {
  width: 100%;
  height: 100%;
  background: white;
  background-repeat: no-repeat;
}

.logo {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
}

.img-svg {
  width: 350px;
}


/* Form
 ========================================================================== */

.form {
  background-color: #F7F7F7;
  border: 1px solid white;
  border-radius: 5px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1em auto;
  margin-top: 1em;
  padding-top: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: .5em;
  max-width: 700px;
  /* area width */
  width: 90%;
}

h2 {
  font-weight: normal;
}


/* Button
 ========================================================================== */

.btn-submit {
  background-color: ;
  border-radius: 5px;
  border: 1px solid white;
  color: #fff;
  max-width: 100%;
  font-family: 'AvenirNextRegular', Helvetica, Arial, sans-serif;
  background: rgba(230, 0, 39, 1.1);
  touch-action: manipulation;
}

[class*='btn-'] {
  border-bottom: 2px solid rgba(0, 0, 0, .15);
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font: -webkit-small-control;
  font-size: .8em;
  line-height: 140%;
  margin-top: .5em;
  padding: 10px 20px;
  width: 100%;
  text-transform: uppercase;
  text-align: center;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.next_page {
  padding-right: 5%;
  font-style: normal;
}


/* 
========================================================================== */

.header_frame {
  background-color: #F7F7F7;
  border: 1px solid white;
  border-radius: 5px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
  margin: 10px auto;
  margin-top: -20px;
  padding: .5em 2em .5em 2em;
  margin-bottom: 30px;
  width: 100%;
  max-width: 700px;
  color: black;
  text-align: left;
}


/* Navigation Pan
========================================================================== */

.nav-pan {
  background-color: #F7F7F7;
  border: 1px solid white;
  border-radius: 5px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
  padding-top: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: .5em;
  max-width: 200px;
  height: auto;
  width: 90%;
  position: fixed;
  bottom: 0px;
  bottom: 0px;
  left: 0px;
}


/* Navigation 
========================================================================== */

.nav__list_ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100px;
  backface-visibility: hidden;
}

.nav__list {
  display: flex;
  flex-flow: column wrap;
  height: 85vh;
  transform: translate(0, -100%);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav__list--active {
  transform: translate(0, 0);
}

.nav__item {
  flex: 1;
  position: relative;
}

.nav__link {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  font-size: 24px;
  background: #2b3033;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: red;
  /* Icons color */
  ;
}

.nav__link:hover {
  background: #272b2e;
}

@media (max-width: 640px) {
  .nav {
    width: 70px;
  }
  .nav__list {
    height: 90vh;
  }
}

.nav_btn {
  background: #2b3033;
  color: red;
  border: 0px;
}


/* Burger (Small square in the left up angle with three horizontal bar) 
========================================================================== */

.burger {
  height: 15vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  background: #2b3033;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.burger:hover {
  background: #272b2e;
}

.burger__patty {
  position: relative;
  height: 2px;
  width: 40px;
  background: white;
}

.burger__patty:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  height: 2px;
  width: 100%;
  background: white;
}

.burger__patty:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  height: 2px;
  width: 100%;
  background: white;
}

.burger__patty,
.burger__patty:before,
.burger__patty:after {
  will-change: transform;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.burger--active .burger__patty {
  transform: rotate(90deg);
}

.burger--active .burger__patty:before {
  transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
}

.burger--active .burger__patty:after {
  transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
}

@media (max-width: 640px) {
  .burger {
    height: 10vh;
  }
  .burger__patty {
    transform: scale(0.8);
  }
  .burger--active .burger__patty {
    transform: scale(0.8) rotate(90deg);
  }
}


/* Loader between page (red animated wheel)
========================================================================== */

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid red;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* button#submit_button {
    background: rgba(205,204,204,1);
} */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="eng">

<head>
  <meta charset="utf-8">
  <meta name="author" content="">
  <meta name="description" content="Welcome Page">
  <title>Welcome Page</title>
  <!-- Library Javascirpt and CSS -->
  <!-- specific CSS for debug mode -->
  <style type="text/css">
    #debug_all,
    #debug_specific {
      margin: .5em;
      padding-bottom: .5em;
    }
    
    #debug_selector,
    #debug_bu_selector {
      margin-top: 1em;
      margin-bottom: 1em;
    }
  </style>
</head>

<body class="bg">
  <!-- div of the loader -->
  <div id="wait_tip" style="display:none" class="loader"></div>
  <!-- Brand Logo -->
  <div class="logo"></div>
  <div id="current" style="display:block">
    <div class="formbox">
      <div class="form">
        <div class="item">
          <h2 style="font-weight:normal">Welcome into the Application</h2>
        </div>
        <br>
        <form title="Available business unit" id="wlc_form" name="welcome_form" action="" onsubmit="return validation('submit_button','wait_tip');">
          <div class="item">
            <table>
              <tbody>
                <tr>
                  <td>
                    Choose a Business unit in the list:
                  </td>
                  <td>
                    <select name="bu_prompt" id="bu_prompt" required="">
                      <option value="" disabled="" selected=""> -- Choose a business unit -- </option>
                      <option value="1">HONG KONG</option>
                      <option value="D01">BELGIUM</option>
                      <option value="D02">TAIWAN</option>


                      <option value="D08">D08</option>
                      <option value="D09">SINGAPORE</option>
                      <option value="D10">FRANCE</option>

                      <option value="GBR">GREAT BRITAIN</option>
                      <option value="SGP">SINGAPORE</option>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <br>
          <hr>
          <br>
          <div class="item">
            <label>What do you want to do on this selected  ?</label>
            <ul name="checkingbox">
              <li><input type="checkbox" id="Check1" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> Manage </li>
              <li><input type="checkbox" id="Check2" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> Sending Report</li>
              <li><input type="checkbox" id="Check3" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> other</li>
            </ul>
          </div>
          <!-- end item div -->
          <br>
          <input id="log" type="checkbox" name="_debug" value="log">
          <label for="log" style="font-size:0.7em">  </label>
          <button class="btn-submit" id="submit_button" disable="true" type="submit" disabled="" form="wlc_form">
							<i class="next_page">  Next Page </i>
							<i class="fa fa-arrow-right"></i>
						</button>
        </form>
        <!-- end div form -->
      </div>
      <!-- end div formbox -->
    </div>
    <!-- end current div -->
  </div>
  <!-- Navigation Pan -->
  <nav class="nav">
    <div class="burger">
      <div class="burger__patty"></div>
    </div>
    <ul class="nav__list nav__list_ul">
      <li class="nav__item">
        <button class="nav__link" id="debug_mode_btn" title="Unlock business unit"><i class="fa fa-cogs"></i></button>
      </li>
    </ul>
  </nav>

  <div id="debug_mode" style="display:none" class="form">
    <div>
      <h2> </h2>
    </div>
    <select id="debug_selector">
      <option disabled="" selected=""> -- Choose an action -- </option>
      <option value="debug_specific"> Unlock </option>
      <option value="debug_all"> Unlock All </option>
    </select>

    <div id="debug_specific" style="display:none">
      <form action="" method="GET" onsubmit="return validation('wlc_unlock','wait_tip');">
        <input type="hidden" name="_debug_bu" value="1">
        <input type="hidden" name="" value="">
        <label> Choose a locked business unit: </label>
        <select name="bu_name" id="debug_bu_selector">

        </select>
        <button class="btn-submit" id="wlc_unlock" type="submit">
						<i class="next_page"> Unlock </i>
						<i class="fa fa-unlock-alt"></i>
					</button>
      </form>
    </div>
    <!-- Unlock all Bu -->
    <div id="debug_all" style="display:none">
      <form action="" method="GET" onsubmit="return validation('wlc_all_unlock','wait_tip');">
        <input type="hidden" name="_debug_all_bu" value="1">
        <input type="hidden" name="" value="">
        <button class="btn-submit" id="wlc_all_unlock" type="submit">
						<i class="next_page"> Unlock All </i>
						<i class="fa fa-unlock-alt"></i>
					</button>
      </form>
    </div>
    <!-- end of unlocking mode -->
  </div>
  <!-- specific JS for debug mode, load at the end for avoid problem -->
</body>

</html>

Answer 1

这是CSS：

#submit_button[disabled]
{
 background: grey;
}

Answer 2

一个CSS解决方案是：

.btn-submit:disabled {
  /* your styles */
}

Answer 3

button:disabled{
background-color:red;
}

<button>Enabled</button>
<button disabled>Disabled</button>