troubleshooting Question

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

Avatar of Jazzy 1012
Jazzy 1012 asked on
JavaScriptCSS
8 Comments1 Solution142 ViewsLast Modified:
<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>

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;
}

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.
ASKER CERTIFIED SOLUTION
Snarf0001

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros