CODEWITHSUNDEEP
jqueryhtml
deew
deew

Reputation: 55

Execute function only once even though radio buttons are selected multiple times

In my code below there are four radio buttons. If you click on one of them, it will execute a function to activate the "next" button. Upon clicking "next", the div will slide.

If I keep clicking other options/radio buttons multiple times, the function will also execute multiple times and the div keeps on sliding. How do I prevent this? I only want the div to slide once even though I selected multiple radio buttons.

JSfiddle for example: http://jsfiddle.net/Lqjy6vja/

<div>
<ul id="orderform">
    <li class="formitem">
        <input type="radio" name="jcolour" id="jcolour1" value="Black/Red Jersey" /><label for="jcolour1">Black/Red</label><br/><br/>
        <input type="radio" name="jcolour" id="jcolour2" value="Black/White Jersey" /><label for="jcolour2">Black/White</label><br/><br/>
        <input type="radio" name="jcolour" id="jcolour3" value="White/Black Jersey" /><label for="jcolour3">White/Black</label><br/><br/>
        <input type="radio" name="jcolour" id="jcolour4" value="Custom Jersey" /><label for="jcolour4">Custom Jersey</label>
        <div class="nextbtn">Next ></div>
    </li>
    <li class="formitem">2</li>
</ul>
</div>
<script>
$(document).ready(function(){
    $(".nextbtn").prop('disabled', true).css("opacity","0.4");
    var winwidth=$(window).width();
    $("#orderform li").width(winwidth);
    $('input:radio[name=jcolour]').change(function () {
    $(this).closest(".formitem").find(".nextbtn").css("opacity","1");
    $(".nextbtn").click(function(){
        $("#orderform").animate({
            marginLeft: '-='+winwidth
        });
    });
});
</script>

Upvotes: 4

Views: 594

Answers (2)

Shravan Chaurasiya
Shravan Chaurasiya

Reputation: 109

 Do like this , It will work.

            <div>
                    <ul id="orderform">
                        <li class="formitem">
                            <input type="radio" name="jcolour" class="jcolour" id="jcolour1" value="Black/Red Jersey"
                                isslide="false" /><label for="jcolour1">Black/Red</label><br />
                            <br />
                            <input type="radio" name="jcolour" class="jcolour" id="jcolour2" value="Black/White Jersey"
                                isslide="false" /><label for="jcolour2">Black/White</label><br />
                            <br />
                            <input type="radio" name="jcolour" class="jcolour" id="jcolour3" value="White/Black Jersey"
                                isslide="false" /><label for="jcolour3">White/Black</label><br />
                            <br />
                            <input type="radio" name="jcolour" class="jcolour" id="jcolour4" value="Custom Jersey"
                                isslide="false" /><label for="jcolour4">Custom Jersey</label>
                            <div class="nextbtn">
                                Next ></div>
                        </li>
                        <li class="formitem">2</li>
                    </ul>
                </div>


            <script type="text/javascript">
                    $(document).ready(function () {
                        $(".nextbtn").prop('disabled', true).css("opacity", "0.4");
                        var winwidth = $(window).width();
                        $("#orderform li").width(winwidth);
                        $('input:radio[name=jcolour]').change(function () {
                            debugger;
                            var slideval = $('.jcolour').attr('isslide');
                            if (slideval == "false") {
                                $('.jcolour').attr('isslide', 'true');
                                $(this).closest(".formitem").find(".nextbtn").prop('disabled', false).css("opacity", "1");
                                $(".nextbtn").click(function () {
                                    $("#orderform").animate({
                                        marginLeft: '-=' + winwidth
                                    });
                                });
                            }
                        });
                    });
                </script>

Upvotes: 0

user3382988
user3382988

Reputation:

That's because you set the click event for each option change event. So, when you click the div every attached click events execute. You need to set it only once putting the click event handler outside the change event:

$(".nextbtn").prop('disabled', true).css("opacity","0.4");
var winwidth=$(window).width();
$("#orderform li").width(winwidth);

$('input:radio[name=jcolour]').change(function () {
    $(this).closest(".formitem").find(".nextbtn").css("opacity","1");
});
$(".nextbtn").click(function(){
    $("#orderform").animate({
        marginLeft: '-='+winwidth
    });
});

Here is the updated JSFIDDLE

Upvotes: 5

Related Questions