Checkbox processes in jQuery

I was wondering if anyone would mind looking over my JSFiddle and letting me know if this is best practice for the operation.

I am looking at it and it works but it seems very verbose. The code basically allows a top level set of checkboxes, it you think of it in a table structure it would be the first row and only checkboxes in the column that has the active checkbox can be selected.

I am relying very heavily on the naming convention of classes and ids together with the jQuery $(this).

Basically the classes of the bottom level checkboxes have to be the same name as the top level ids. The bottom level checkboxes are also disabled using a class name that all the bottom level checkboxs have.

I am kinda new to jQuery and I am not sure this is the best way to do it.

$(function () {
    $(".service-slider").on("click", function () {

    // Disable all bottom level slides
    $(".slide").attr("disabled", false);

   // Uncheck all previous checked checkboxes
   $(".slide").prop('checked', false);

   // Disable top level checkboxs
   $(".service-slider").prop('checked', false);

   // Enable the selected checkbox to true
   $(this).prop('checked', true);

   //Disable bottom level slides
   $(".slide").attr("disabled", true);

   // Get selected id to enable all bottom level slides based on this
   var tron = "." + $(this).attr("id");

   // Get the var and enable only those checkboxes
   $(tron).attr("disabled", false);

   });
 });