Get checkbox id of the previous one selected

Jazzy 1012
Jazzy 1012 used Ask the Experts™
on
I have this code:
<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 hide12" 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 hide12" 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 hide12" 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 hide12"  id="chk-btn12"></i>  5pm - 7pm</label>
      </center>
      </td>
      <td></td>
    </tr>
  </table>
</form>

Open in new window


This CSS:
label .hide11{
	display: none;
}
label .hide12{
	display: none;
}
label .hide11{
	display: none;
	position: absolute;
	left: 15px;
	top: 0;
	line-height: 56px;
}

Open in new window

JS:
$(function() {
	  $(".colour-button").click(enable_cb);
	});
	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").attr("disabled", true).prop("checked", false);
		        }
		    }
		}
//CHANGE FROM DISABLE TO ENABLE(BUTTON COLOR)

$(document).ready(function() {
	  $('.colour-button').on('click', function() {
	    if ($(this).is(':checked')) {
	      //clear the other checkboxes
	      $(this).nextAll('.colour-button').prop('checked', false);
	      //alert(this.id);
	      $(this).prevAll('.colour-button').prop('checked', false);
	    }
	  });
	});

//TO ONLY ALLOW ONE TO BE CHOSEN.

Open in new window


My issue is I want it with the last javascript to "hide" the fa fa-checkbox, I have it done in the first javascript but Im unsure how to do it in the second JS because I will need the checkbox "chck-id" of the previous checkbox not the one I would have just clicked. This is my output now:
see.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Please see if the response here https://www.experts-exchange.com/questions/29010589/Only-allow-one-check-box.html#a42061482 addresses this question - seems like there is overlap.

Author

Commented:
Yes please go back to see the reply

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