How do i set a button to disable with jQuery-CodePudding

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

CodePudding user response：

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