How do i set a button to disable with jQuery

Question

More precisely, what is wrong with the following code, which makes it so that fields will disable int the Faculty button only if I've double-clicked the Department button first?

I've attached as a codepen for full context

$("#fac-button").on('click', function (e) {
    if($(".fName").is(":disabled")){$(".fName").prop("disabled", false)}
    if($(".lName").is(":disabled")){$(".lName").prop("disabled", false)}
    if($(".empId").is(":disabled")){$(".empId").prop("disabled", false)}
    if($(".headC").is(":enabled")) {$(".headC").prop("disabled", true)}
    if($(".startDate").is(":disabled")) {$(".startDate").prop("disabled", false)}
    if($(".stillEmployed").is(":disabled")) {$(".stillEmployed").prop("disabled", false)} 
    if($(".endDate").is(":disabled")) {$(".endDate").prop("disabled", false)}

Any help would be great, thanks

Answer 1

There is NEVER a need for an if when you have something that takes a boolean.

In your case just negate the boolean

$("#fac-button").on('click', function(e) {
  ["fname", "lName", "empId", "headC", "startDate", "stillEmployed", "endDate"]
  .forEach(sel => {
    const elem = document.querySelector("." + sel);
    elem.disabled = !elem.disabled;
  })
})

You can add

$(".headC").removeAttr("disabled")

if needed