Avatar of Jazzy 1012
Jazzy 1012
 asked on

Get checkbox id of the previous one selected

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
JavaScript

Avatar of undefined
Last Comment
Jazzy 1012

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

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
Yes please go back to see the reply
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