Jquery 即使多次选择单选按钮，也只执行一次功能

在我下面的代码中有四个单选按钮。如果您单击其中一个按钮，它将执行一个功能来激活“下一步”按钮。单击“下一步”，div将滑动

如果我多次单击其他选项/单选按钮，该函数也将执行多次，div将继续滑动。我如何防止这种情况？我只希望div滑动一次，即使我选择了多个单选按钮

例如，JSFIDLE：

黑色/红色


黑/白


白色/黑色


定制运动衫
下一步>

2

$（文档）.ready（函数（）{
$（“.nextbtn”）.prop（'disabled'，true）.css（“不透明”，“0.4”）；
var winwidth=$（window.width（）；
$（“#订单li”）.width（winwidth）；
$（'input:radio[name=jcolour]'）。更改（函数（）{
$（this.nexist（“.formitem”）.find（“.nextbtn”）.css（“不透明度”，“1”）；
$（“.nextbtn”）。单击（函数（）{
$（“#订单”）。设置动画({
marginLeft:'-='+winwidth
});
});
});
这是因为您为每个选项
更改
事件设置了
单击
事件。
因此，当您
单击
div时，每个附加的
单击
事件执行。
您只需将单击事件处理程序置于
更改
事件之外一次即可设置它：

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

以下是最新的





黑色/红色



黑/白



白色/黑色



定制运动衫
下一步>

2

$（文档）.ready（函数（）{
$（“.nextbtn”）.prop（'disabled'，true）.css（“不透明”，“0.4”）；
var winwidth=$（window.width（）；
$（“#订单li”）.width（winwidth）；
$（'input:radio[name=jcolour]'）。更改（函数（）{
调试器；
var slideval=$（'.jcolour'）.attr（'isslide'）；
如果（slideval==“false”）{
$（'.jcolour'）.attr（'isslide'，'true'）；
$（this）.closest（“.formitem”）.find（.nextbtn”）.prop（'disabled'，false）.css（“不透明”，“1”）；
$（“.nextbtn”）。单击（函数（）{
$（“#订单”）。设置动画({
marginLeft:'-='+winwidth
});
});
}
});
});
$（“#订单”）.stop（）.animate({…@没关系，我认为ccasado的答案是正确的。我不建议在这个问题上使用stopcase@frikinside嗨，我已经测试了nevermind和ccasado的答案，它们都有效。但我想知道为什么使用stop不好？@deew，因为停止动画并不能解决真正的问题。就像ccasado说的，你正在设置一个ew在每个单选按钮更改事件上单击事件处理程序，这才是真正的问题。停止动画就像用石头打破窗户，而不是打开它。你可以呼吸到新鲜空气，但这不是正确的方法。
$(".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
    });
});

 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>