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

时间:2015-09-04 09:02:11

标签: jquery html

在我的下面的代码中有四个单选按钮。如果你点击其中一个,它将执行一个功能来激活" next"按钮。单击" next",div将滑动。

如果我多次单击其他选项/单选按钮,该功能也会执行多次,并且div会继续滑动。我该如何防止这种情况?即使我选择了多个单选按钮,我也只想让div滑动一次。

JSfiddle例如: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>

2 个答案:

答案 0 :(得分:5)

这是因为您为每个选项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

答案 1 :(得分:0)

 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>