Checkbox processes

Question

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.

//<!-- Services checkbox operations // i dont think this is the best way to do it but it works-->

$(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,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 label {
    display: block;
    width: 22px;
    height: 13px;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
    cursor: pointer;
    position: absolute;
    top: 4px;
    z-index: 1;
    left: 4px;

    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    background: #fcfff4;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.slide label:after {
    content: '';
    position: absolute;
    width: 11px;
    height: 8px;

    background: #333;
    left: 2px;
    top: 2px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
}
.slide input[type=checkbox]:checked + label {
    left: 54px;
}

.slide input[type=checkbox]:checked + label:after {
    background: #00bf00;
    left:9px;
}
.slide input[type="checkbox"]{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Choose Your Service-->
        <div id="service-types">

            <!-- Economay -->
            <div id="economy-service" class="service-type">

                <label class="dialog-main-label">Economy</label>
                <div class="service-desc">24 - 96 hours</div>
                <div class="service-price">R78.09</div>

                <div class="slide">
                    <input type="checkbox" value="Economy" class="service-slider" id="economy-main" name="economy-main" />
                    <label for="economy-main"></label>
                </div>

                <hr />

                <div id="Div3">
                    <label id="Label3"></label>

                    <label>
                        Embassies<br />
                        R300.00
                    </label>
                    <div class="slide">
                        <!-- Append top level checkbox id to the bottom level checkbox class so that there is a relationship in jquery ( _quickQuote.js) -->
                        <input type="checkbox" value="Embassies" class="slide economy-main" id="eco-ckbx-embassies" name="eco-ckbx-embassies" />
                        <label for="eco-ckbx-embassies"></label>
                    </div>

                </div>
            </div>

            <!-- Same Day -->
            <div id="same-day-service" class="service-type">

                <label class="dialog-main-label">Same Day</label>
                <div class="service-desc">Get it today</div>
                <div class="service-price">397.40</div>

                <div class="slide">
                    <input type="checkbox" value="Same Day" class="service-slider" id="same-main" name="same-main" />
                    <label for="same-main"></label>
                </div>
                <hr />

                <div id="Div2">
                    <label id="Label2"></label>

                    <label>
                        Embassies<br />
                        R300.00
                    </label>
                    <div class="slide">
                        <input type="checkbox" value="Public holiday" class="slide same-main" id="day-ckbx-embassies" name="day-ckbx-embassies" />
                        <label for="day-ckbx-embassies"></label>
                    </div>

                    <label>
                        Public Holidays<br />
                        R200.00
                    </label>
                    <div class="slide">
                        <input type="checkbox" value="Public holiday" class="slide same-main" id="day-ckbx-public" name="day-ckbx-public" />
                        <label for="day-ckbx-public"></label>
                    </div>

                    <label>
                        After Hours<br />
                        R300.00
                    </label>
                    <div class="slide">
                        <input type="checkbox" value="Public holiday" class="slide same-main" id="day-ckbx-after" name="day-ckbx-after" />
                        <label for="day-ckbx-after"></label>
                    </div>
                </div>
            </div>

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 checkboxes have.

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

There is something that is bugging me when people are using jQuery to handle states or application flow. The logic code becomes dependant of the view. Though, I think it's as good as jQuery allows you to do. You could use functions with meaningful names so that the comments would be useless. If you plan on creating something bigger, you should consider using a framework over a dom manipulation library. I suggest AngularJS or Backbone. — jackdbernier
– jackdbernier, Commented Feb 6, 2014 at 17:50

Malachi · Accepted Answer · 2016-04-01 15:06:53Z

2

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.

edited Apr 1, 2016 at 15:06

answered Sep 10, 2014 at 18:37

Malachi

29.1k11 gold badges87 silver badges188 bronze badges

\$\begingroup\$ Hey, thanks for the reply. I did post a link to the jsfiddle that has all the code. It is the first link in the post \$\endgroup\$

user26985
– user26985

2014-09-11 06:16:01 +00:00
Commented Sep 11, 2014 at 6:16
1

\$\begingroup\$ @gerdi, we also have the ability to use Stack Snippets now so that reviewers don't have to leave this page to run your code. There is a new option when you go to edit your question on the toolbar, next to the picture insert button \$\endgroup\$

Malachi
– Malachi

2014-09-11 15:37:33 +00:00
Commented Sep 11, 2014 at 15:37
1

\$\begingroup\$ rad .. Updated with the snippet. \$\endgroup\$

user26985
– user26985

2014-09-11 20:04:17 +00:00
Commented Sep 11, 2014 at 20:04

Add a comment |

Stack Exchange Network

Checkbox processes

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Checkbox processes

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions