Avatar of Jazzy 1012
Jazzy 1012
 asked on

Can anyone see what is the fault in my javascript code?

<center>
<div class="tables">
<form>
<table class="table table-bordered">
<thead>
      <tr>
    <th class="thheader">Monday</th>
    <th class="thheader">Tuesday</th>
    <th class="thheader">Wednesday</th>
    <th class="thheader">Thursday</th>
    <th class="thheader">Friday</th>
    </tr>
    </thead>
    <tr>
      <td>
      
      </td>
      <td>
      <center>
      <input type="checkbox" class="colour-button" value="10 - 12" id="btn1012" /><label for="btn1012"> <i class="fa fa-check-circle hide11" id="chk-btn1012"></i>  10am - 12pm</label>
      <input type="checkbox" class="colour-button" value="10 - 12" id="btn1214" /><label for="btn1214" class="labe"><i class="fa fa-check-circle hide11" id="chk-btn1214"></i> 5pm - 7pm</label>
      </center>
      </td>
      <td>
              
      
      </td>
            <td>
            <center>
      <input type="checkbox" class="colour-button" value="10 - 12" id="btn10" /><label for="btn10"><i class="fa fa-check-circle hide11" id="chk-btn10"></i>  10am - 12pm</label>
        <input type="checkbox" class="colour-button" value="10 - 12" id="btn12" /><label for="btn12" class="labe"><i class="fa fa-check-circle hide11"  id="chk-btn12"></i>  5pm - 7pm</label>
      </center>
      </td>
      <td></td>
    </tr>
  </table>
</form>


</div>
</center>
<center class="cen">
<form>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn1" disabled/><label for="btn1"><i class="fa fa-check-circle hide11" id="chk-btn1"></i>   Thursday, March 2nd</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn2" disabled /><label for="btn2" class="labe1"><i class="fa fa-check-circle hide11" id="chk-btn2"></i>  Tuesday, March 7th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn3" disabled/><label for="btn3"><i class="fa fa-check-circle hide11" id="chk-btn3"></i>  Thursday, March 16th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn4" disabled/><label for="btn4" class="labe1"><i class="fa fa-check-circle hide11" id="chk-btn4"></i>  Tuesday, March 21st</label>
</form>
</center>
<center class="cen">
<button  class="disabled white cbtn1 c2" type="submit" id="submit" disabled>NEXT &nbsp;&nbsp;&nbsp;<i class="fa fa-long-arrow-right"></i></button>
</center>
</span>

<script src="http://code.jquery.com/jquery.js"></script>
 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$(function() {
	  $(".colour-button").click(enable_cb);
	});
	function enable_cb() {
	  if (this.checked) {
	    $("input.colour-button1").removeAttr("disabled");
	    $("#chk-"+this.id).show();
	  } else {
	    $("input.colour-button1").attr("disabled", true);
	    $("#chk-"+this.id).hide();
	  }
	}
</script>
<script>
$('.colour-button1').click(function () {
	$("#chk-"+this.id).show();
    //check if checkbox is checked
    if ($(this).is(':checked')) {

	$('#submit').removeAttr('disabled').addClass('orangeBtn23').removeClass('disabled'); //enable input

    } else {
        $('#submit').attr('disabled', true).removeClass('orangeBtn23').addClass('disabled'); //disable input
        $("#chk-"+this.id).hide(); 
    }
});

</script>

Open in new window


Css:
.colour-button {
  display: none;
}
label:hover {
  cursor: pointer;
}
.colour-button + label {
  background:  #c1c1c1;
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
}
.colour-button:checked + label {
  background: #cf5630;
}
.thheader{
	width:135px;
	text-align:center;
	background-color:#FAFAFA;
	color: #18181d;
}
.tables{
	width:800px;
}
.labe{
	padding:5px 18px !important;
}
.colour-button1 {
  display: none;
}
.colour-button1 + label {
  background:  #c1c1c1;
  color: white;
  border-radius: 5px;
  padding: 18px 200px;
}
.colour-button1:checked + label {
  background: #cf5630;
}
.labe1{
	padding:18px 207px !important;
}
label .hide11{
	display: none;
}

Open in new window


Heres how my code works:
When I click the first form, the second form becomes enabled for me to chose from, then the next button becomes enabled. But I noticed that if I pick more than one from the first form, then change my mind and remove one, the second form becomes disabled again, this also happens with the second form and the next button. How can I solve this issue? I want as long as ONE is checked, the second part should ALWAYs work.
JavaScriptCSS

Avatar of undefined
Last Comment
Jazzy 1012

8/22/2022 - Mon
Leonidas Dosas

The problem that you have is this. When I choose an option at the first form then I can choose an option at the second form.If I deselect the first form option the second one (that I chose before) "locked" in someway at display inline status and then unfortunately I can't deselect this. My opinion is to connect via data attr the two forms (eg when i select an input of the first then add a value to the second form input element of that day eg Tuesday or Thursday)  so that the engine after the complete disabled of the first form option to disable the corresponding input day elements at the second form via another function.
Jazzy 1012

ASKER
Yes can you help me on how to solve it?
Leonidas Dosas

I'll do my best.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Jazzy 1012

ASKER
Thanks
Snarf0001

Just change your enable_cb() function a bit.
If the target is checked, it can stay as it was (just using .prop() syntax instead).

If it's being unchecked, then instead of automatically processing, check if there's ANY other items that are checked before disabling.
Also added a condition to uncheck the second form at the same time as disabling, but can remove if that isn't what you wanted.

function enable_cb() {
    if (this.checked) {
        //this will mean at least one is always checked
        $("input.colour-button1").prop("disabled", false);
        $("#chk-" + this.id).show();
    }
    else {
        //in this case, hide the element if you need to, but check for ANY items
        //$("input.colour-button1").attr("disabled", true);
        $("#chk-" + this.id).hide();

        if ($(".colour-button:checked").length == 0) {
            $("input.colour-button1").prop("disabled", false).prop("checked", false);
        }
    }
}

Open in new window

Jazzy 1012

ASKER
That solves for my first javascript what about my second, it has the same fault
Ill repost the javascript code:
$('.colour-button1').click(function () {
	$("#chk-"+this.id).show();
    //check if checkbox is checked
    if ($(this).is(':checked')) {

	$('#submit').removeAttr('disabled').addClass('orangeBtn23').removeClass('disabled'); //enable input

    } else {
        $('#submit').attr('disabled', true).removeClass('orangeBtn23').addClass('disabled'); //disable input
        $("#chk-"+this.id).hide(); 
    }
});

Open in new window

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Snarf0001

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Jazzy 1012

ASKER
Thank you soo much, you were a big help!