Checkbox processes

I was wondering if anyone would mind looking over my

JSFiddle ( contains html / css / js )

and letting me know if this is best practice for the operation.



//

$(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);

});
});
`.service-desc,.service-price{
font-size:14px;
}
.dialog-main-label {
font-weight:bold;
}
.ui-dialog .ui-dialog-buttonpane{
padding:0;
}
.service-type{
display:inline-block;
width:25%;
float:left;
height:auto;
}
.service-type button{
width:100%;
}
.service-type input{
width:10px;
}
.service-type label{
font-size:16px;
}

#total{
position:absolute;
bottom:20px;
z-index:1000;
width:670px;
font-size:25px;
}

/ SLIDE TWO /
.slide {
width: 80px;
height: 20px;
position: relative;
margin:0;
background:#ccc;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slide:after {
content: '';
position: absolute;
top: 10px;
left: 14px;
height: 2px;
width: 52px;

background: #111;

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0

You aren't really doing much here that can really be cleaned up, your indentation is off though, your code should look like this

$(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 checkboxes
        $(".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);
    });
});

Please use proper indentation

You should also provide the html that goes along with this so that we can give a better review.

StackExchange Code Review Q#28176, answer score: 2