I have an application with a form and 2 inputs (a dropdown list and a checkbox). These two inputs are required to be able to click on the submit button (a javascript function do the job)
the button is currently red with some CSS, even if disabled and i would like it be grey when disabled and red otherwise.
the job seems simple, but i have a problem with javascript, it doesn't work.
I tried this:
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';
}
}
but it doesn't work. I also tried this:
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';
}
}
console don't inform about some error or other.
If someone can help me Here is the code pen with all javascript and CSS used.
CodePen
thanks in advance
/* => 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=".3.1/jquery.min.js"></script>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="Wele Page">
<title>Wele 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">Wele into the Application</h2>
</div>
<br>
<form title="Available business unit" id="wlc_form" name="wele_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>I have an application with a form and 2 inputs (a dropdown list and a checkbox). These two inputs are required to be able to click on the submit button (a javascript function do the job)
the button is currently red with some CSS, even if disabled and i would like it be grey when disabled and red otherwise.
the job seems simple, but i have a problem with javascript, it doesn't work.
I tried this:
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';
}
}
but it doesn't work. I also tried this:
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';
}
}
console don't inform about some error or other.
If someone can help me Here is the code pen with all javascript and CSS used.
CodePen
thanks in advance
/* => 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./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="Wele Page">
<title>Wele 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">Wele into the Application</h2>
</div>
<br>
<form title="Available business unit" id="wlc_form" name="wele_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>-
When/where do you call the
coloration_button()function? Please provide a Minimal, Reproducible Example that demonstrates the issue in the question itself. – MrUpsidown Commented Jun 27, 2019 at 13:00
3 Answers
Reset to default 1Here's the CSS:
#submit_button[disabled]
{
background: grey;
}
A css solution is:
.btn-submit:disabled {
/* your styles */
}
button:disabled{
background-color:red;
}<button>Enabled</button>
<button disabled>Disabled</button>