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

Jazzy 1012
Jazzy 1012 used Ask the Experts™
on
<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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017

Commented:
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.

Author

Commented:
Yes can you help me on how to solve it?
Distinguished Expert 2017

Commented:
I'll do my best.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thanks
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

Author

Commented:
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

Same scenario, just replacing the "off" with a conditional check for any checked items:

$('.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 if ($('.colour-button1:checked').length == 0) {
        $('#submit').attr('disabled', true).removeClass('orangeBtn23').addClass('disabled'); //disable input
        $("#chk-" + this.id).hide();
    }
});

Open in new window

Author

Commented:
Thank you soo much, you were a big help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial