如何确保 jquery 在多步表单中仅选择一次“下一步”按钮？

Question

我是 jQuery 的新手。我希望在选中单选按钮 (https://smartune.nl/reparatie-melden) 时，单击类 pbNext 的按钮ONLY ONCE。以下工作，但它把我带到了最后一步。所有下一个按钮都有 pbNext 类。有人可以帮我解决这个问题吗？

 $(document).ready(function(){
 $("input[type=radio]").change(function(){
 $(".pbNext").click();
 });
 });

Answer 1

奥卡姆剃刀可能会给出这样的答案：

$(document).ready(function(){
    var pbClicked = false;
    $("input[type=radio]").click(function(){
        if (!pbClicked){
            $(".pbNext").click();
            pbClicked = true;
        }
    });
});

演示：

$(document).ready(function(){
    var pbClicked = false;
    $("input[type=radio]").click(function(){
        var msg = (pbClicked) ? 'ignored' : 'clicked';
        if (!pbClicked){
            $(".pbNext").click();
            pbClicked = true;
        }
        $('#msg').html(msg);
    });
    
    $('.pbNext').click(function(){
      $(this).css('background','blue');
    });
});

#msg{position:fixed;right:15px;font-size:1.3rem;text-align:center;}
.pbNext{width:100px;height:40px;background:pink;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="msg"></div>

<input type="radio" />
<input type="radio" />
<input type="radio" />
<input type="radio" />

<div class="pbNext"></div>

---

如果您要跟踪多个按钮，并且您希望用户只能单击每个按钮一次，那么您可以使用数组来跟踪被单击的按钮。如果您为每个要跟踪的元素添加一个 ID，这将是最简单的。这是一个示例（请注意，第 3 个复选框已被明确允许切换，而其他 3 个受其存在于单击的复选框数组中的限制。）：

var tmp_id, arrClicked = []; //vars created outside fns that use them

$("input[type=checkbox]").click(function(){
    tmp_id = this.id.split('_')[1];
    if (arrClicked.indexOf(tmp_id) == -1){
        $(".pbNext").click();
        arrClicked.push(tmp_id);
    }
    
    else if(tmp_id == 3){ $('.pbNext').click(); }  //Allow id 3 to be re-clicked, just to show
    $('#msg').html(JSON.stringify(arrClicked));
    
});

$('.pbNext').click(function(){
  $('#cb_'+tmp_id).parent().toggleClass('a'+tmp_id);
});

#msg{position:fixed;right:15px;font-size:1.3rem;text-align:center;}

button{margin-top:15px;}
div{width:150px;padding:15px;border:1px solid #ccc;}

.a1{background:palegreen;}
.a2{background:lightpink;}
.a3{background:lightblue;}
.a4{background:palegoldenrod;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<aside id="msg"></aside>

<div><input type="checkbox" id="cb_1" /></div>
<div><input type="checkbox" id="cb_2" /></div>
<div><input type="checkbox" id="cb_3"/></div>
<div><input type="checkbox" id="cb_4" /></div>

<button class="pbNext">Does Nothing button</button>

jsFiddle version that you can play with