How to disable a button with style (CSS) using javascript?

Question

I have here a simple script that will disable other buttons onclick of a button. For example, if a user clicks sample disable, it will disable all specified buttons.

Right now, it does this just fine. It disables all the other buttons. However, my problem is, those buttons with CSS class "cbtn" aren't looking like they are disabled when in fact, they are.

What I wanted to accomplish is: to make the buttons (a) through (j) retain their style (CSS), but appear disabled just like how 1, through 4 looks when they are disabled.

function resetallamnotes() {
  document.getElementById("1st").disabled = false;
  document.getElementById("2nd").disabled = false;
  document.getElementById("3rd").disabled = false;
  document.getElementById("4th").disabled = false;

  document.getElementById("(a)").disabled = false;
  document.getElementById("(b)").disabled = false;
  document.getElementById("(c)").disabled = false;
  document.getElementById("(d)").disabled = false;
  document.getElementById("(e)").disabled = false;
  document.getElementById("(f)").disabled = false;
  document.getElementById("(g)").disabled = false;
  document.getElementById("(h)").disabled = false;
  document.getElementById("*(i)").disabled = false;
  document.getElementById("(j)").disabled = false;
}

function amnotesDisable1st() {
  document.getElementById("1st").disabled = true;
  document.getElementById("2nd").disabled = true;
  document.getElementById("3rd").disabled = true;
  document.getElementById("4th").disabled = true;
  document.getElementById("(a)").disabled = true;
  document.getElementById("(b)").disabled = true;
  document.getElementById("(c)").disabled = true;
  document.getElementById("(d)").disabled = true;
  document.getElementById("(e)").disabled = true;
  document.getElementById("(f)").disabled = true;
  document.getElementById("(g)").disabled = true;
  document.getElementById("(h)").disabled = true;
  document.getElementById("*(i)").disabled = true;
  document.getElementById("(j)").disabled = true;
}

.cbtn {
  border: 1px solid;
  border-color: #555555;
  border-radius: 3px;
  padding: 7px 9px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: #000000;
  background-color: #e0f2f1;
  font-weight: bold;
  margin-bottom: 10px;
}

.cbtn:hover {
  background-color: #fafafa;
}

.cbtn:active {
  background-color: #e0f7fa;
  transform: translateY(1px);
  outline: none;
  box-shadow: 1px #666666;
}

<button class="cbtn" onclick="resetallamnotes()">Reset</button>
<br><br>
<button id="1st" onclick="amnotesDisable1st()">sample disable</button>
<button id="2nd" onclick="disable2nd()">2</button>
<button id="3rd" onclick="disable3rd()">3</button>
<button id="4th" onclick="disable4th()">4</button>
<br><br>
<button id='(a)' class="cbtn">(a)</button>
<button id='(b)' class="cbtn">(b)</button>
<button id='(c)' class="cbtn">(c)</button>
<button id='(d)' class="cbtn">(d)</button>
<button id='(e)' class="cbtn">(e)</button>
<button id='(f)' class="cbtn">(f)</button>
<button id='(g)' class="cbtn">(g)</button>
<button id='(h)' class="cbtn">(h)</button>
<button id='*(i)' class="cbtn">(i)</button>
<button id='(j)' class="cbtn">(j)</button>

Thank you thank you in advance! Would really appreciate any help!

Does this answer your question? Style disabled button with CSS — Heretic Monkey
– Heretic Monkey, Commented Apr 7, 2021 at 19:37
You should really refactor to use a common class or an array of IDs and a loop. That repetition is gross. — isherwood
– isherwood, Commented Apr 7, 2021 at 19:38
@HereticMonkey I glanced over it and it does seem what I'm looking for. I will try it out a bit later to check if I can work it out using that method. Thank you! — ixcode
– ixcode, Commented Apr 7, 2021 at 19:38
@isherwood I agree sir. But it's what I can only do right now. Still a beginner in coding, and trying to build a use-able tool for work. I can't tweak it to look better just yet. But thank you for your suggestion! — ixcode
– ixcode, Commented Apr 7, 2021 at 19:40

connexo · Accepted Answer · 2021-04-07 19:48:59Z

Use the :disabled pseudo class to define how disabled buttons are supposed to differ visually:

.cbtn:disabled {
  opacity: 0.33;
  pointer-events: none;
}

const buttonIds = ["1st","2nd","3rd","4th","(a)","(b)","(c)","(d)","(e)","(f)","(g)","(h)","*(i)","(j)"];

function toggleDisabled(on) {
  for (const id of buttonIds) {
    const el = document.getElementById(id);
    el.disabled = typeof on !== 'boolean' ? !el.disabled : on;
  }
}

.cbtn {
  border: 1px solid;
  border-color: #555555;
  border-radius: 3px;
  padding: 7px 9px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: #000000;
  background-color: #e0f2f1;
  font-weight: bold;
  margin-bottom: 10px;
}

.cbtn:hover {
  background-color: #fafafa;
}

.cbtn:active {
  background-color: #e0f7fa;
  transform: translateY(1px);
  outline: none;
  box-shadow: 1px #666666;
}

.cbtn:disabled {
  opacity: 0.33;
  pointer-events: none;
}

<button class="cbtn" onclick="toggleDisabled(false)">Reset</button>
<br><br>
<button id="1st" onclick="toggleDisabled(true)">sample disable</button>
<button id="2nd">2</button>
<button id="3rd">3</button>
<button id="4th">4</button>
<br><br>
<button id='(a)' class="cbtn">(a)</button>
<button id='(b)' class="cbtn">(b)</button>
<button id='(c)' class="cbtn">(c)</button>
<button id='(d)' class="cbtn">(d)</button>
<button id='(e)' class="cbtn">(e)</button>
<button id='(f)' class="cbtn">(f)</button>
<button id='(g)' class="cbtn">(g)</button>
<button id='(h)' class="cbtn">(h)</button>
<button id='*(i)' class="cbtn">(i)</button>
<button id='(j)' class="cbtn">(j)</button>

ray · Accepted Answer · 2021-04-07 19:58:26Z

1

You could apply the base cbtn rules to only those buttons that aren't disabled:

.cbtn:not(:disabled) { 
  /* ... */
}

function resetallamnotes() {
  document.getElementById("1st").disabled = false;
  document.getElementById("2nd").disabled = false;
  document.getElementById("3rd").disabled = false;
  document.getElementById("4th").disabled = false;

  document.getElementById("(a)").disabled = false;
  document.getElementById("(b)").disabled = false;
  document.getElementById("(c)").disabled = false;
  document.getElementById("(d)").disabled = false;
  document.getElementById("(e)").disabled = false;
  document.getElementById("(f)").disabled = false;
  document.getElementById("(g)").disabled = false;
  document.getElementById("(h)").disabled = false;
  document.getElementById("*(i)").disabled = false;
  document.getElementById("(j)").disabled = false;
}

function amnotesDisable1st() {
  document.getElementById("1st").disabled = true;
  document.getElementById("2nd").disabled = true;
  document.getElementById("3rd").disabled = true;
  document.getElementById("4th").disabled = true;
  document.getElementById("(a)").disabled = true;
  document.getElementById("(b)").disabled = true;
  document.getElementById("(c)").disabled = true;
  document.getElementById("(d)").disabled = true;
  document.getElementById("(e)").disabled = true;
  document.getElementById("(f)").disabled = true;
  document.getElementById("(g)").disabled = true;
  document.getElementById("(h)").disabled = true;
  document.getElementById("*(i)").disabled = true;
  document.getElementById("(j)").disabled = true;
}

.cbtn:not([disabled]) {
  border: 1px solid;
  border-color: #555555;
  border-radius: 3px;
  padding: 7px 9px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: #000000;
  background-color: #e0f2f1;
  font-weight: bold;
  margin-bottom: 10px;
}

.cbtn:hover {
  background-color: #fafafa;
}

.cbtn:active {
  background-color: #e0f7fa;
  transform: translateY(1px);
  outline: none;
  box-shadow: 1px #666666;
}

<button class="cbtn" onclick="resetallamnotes()">Reset</button>
<br><br>
<button id="1st" onclick="amnotesDisable1st()">sample disable</button>
<button id="2nd" onclick="disable2nd()">2</button>
<button id="3rd" onclick="disable3rd()">3</button>
<button id="4th" onclick="disable4th()">4</button>
<br><br>
<button id='(a)' class="cbtn">(a)</button>
<button id='(b)' class="cbtn">(b)</button>
<button id='(c)' class="cbtn">(c)</button>
<button id='(d)' class="cbtn">(d)</button>
<button id='(e)' class="cbtn">(e)</button>
<button id='(f)' class="cbtn">(f)</button>
<button id='(g)' class="cbtn">(g)</button>
<button id='(h)' class="cbtn">(h)</button>
<button id='*(i)' class="cbtn">(i)</button>
<button id='(j)' class="cbtn">(j)</button>

edited Apr 7, 2021 at 19:58

answered Apr 7, 2021 at 19:33

ray

27.3k5 gold badges31 silver badges30 bronze badges

8 Comments

connexo Over a year ago

:disabled there is a pseudo class for it.

ixcode Over a year ago

Hello there! Thank you for taking the time to set this up. I was hoping if it's possible to keep the styling (background color, border, border-radius, etc..) and also look disabled or look unclickable.

connexo Over a year ago

@ixcode You specified the exact opposite explicitly to make the buttons (a) through (j) retain their style (CSS), but appear disabled just like how 1, through 4 looks when they are disabled

Ravikumar Over a year ago

Then try like this .cbtn:hover:not(:disabled){ } and .cbtn:active:not(:disabled){ }

mix3d Over a year ago

Using the tools provided (:disabled class or [disabled] attribute selector), you can style the buttons however you like.

|

Collectives™ on Stack Overflow

How to disable a button with style (CSS) using javascript?

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related