Run a function only once, even if the radio buttons are selected multiple times

Question

There are four switches in my code below. If you click on one of them, it will execute a function to activate the “next” button. After clicking "next", the div will slide.

If I click on other parameters / radio buttons several times, the function will also be executed several times, and the div continues to move. How can I prevent this? I only need the div to slide once, although I have selected several 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>

Answer 1

, click change. , click div click . , change:

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

JSFIDDLE

Answer 2

 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>