JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<div class="panel-body">
    <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
        <thead>
        <tr>
            <th>Postcode</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd gradeX">
            <td>PO21 5EJ</td>
            <td><input type="checkbox" class="select-location" name="name1" checked /></td>
            <td><input type="checkbox" class="select-location" name="name1" checked /></td>
            <td><input type="checkbox" class="select-location" name="name1" checked /></td>
        </tr>
        <tr class="odd gradeX">
            <td>PO16 7TD</td>
            <td><input type="checkbox" class="select-location"  name="name2" /></td>
            <td><input type="checkbox" class="select-location"  name="name2" /></td>
            <td><input type="checkbox" class="select-location"  name="name2" /></td>
        </tr>
        <tr class="odd gradeX">
            <td>PE2 6XZ</td>
            <td><input type="checkbox" class="select-location"  name="name4" /></td>
            <td><input type="checkbox" class="select-location"  name="name4" /></td>
            <td><input type="checkbox" class="select-location"  name="name4" /></td>
        </tr>
        <tr class="odd gradeX">
            <td>PE2 8UH</td>
            <td><input type="checkbox" class="select-location"  name="name5" /></td>
            <td><input type="checkbox" class="select-location"  name="name5" /></td>
            <td><input type="checkbox" class="select-location"  name="name5" /></td>
        </tr>

        </tbody>
    </table>
</div>
<label for="confirm-selection">I confirm that ...</label><input type="checkbox" checked id="confirm-selection" class="confirm-selection" name="name5" />
<button id="save" onclick="save">Save</button>

JavaScript

var oldChkBxs;
function detect(){
  var chkBxs=[];
  $('.select-location').each(function(){   
    if(this.checked){
      chkBxs.push(true);
    }else{
      chkBxs.push(false);
    }
  });
  console.log(chkBxs)
  return chkBxs;
}
oldChkBxs=detect();
$('.select-location').on('click',function(){
  var newChk=detect();
  if(oldChkBxs.toString()===newChk.toString()){
   
    $("#save").removeAttr('disabled');
  }else{
    $(".confirm-selection").removeAttr('checked'); 
    $("#save").attr('disabled','disabled');
  }  
});

$(".confirm-selection").change(function(){
 if($(".confirm-selection").is(":checked")){
 	$("#save").removeAttr('disabled');
 }else{
 $("#save").attr('disabled','disabled');
 }
})

$("#save").click(function(){
	alert("then then page will postback")
})