单选按钮上的jQuery单击触发器可防止单选按钮被选中

时间:2017-08-10 04:09:10

标签: javascript jquery html forms

我在单选按钮上使用<a href="" ng-click="changeDivs()" >disappear</a> 来触发表单中的按钮时出现问题。

以下代码会按照您的预期触发按钮。但是,它由于某种原因搞乱了单选按钮并阻止它被选中。即使看起来有问题,也不是吗?

.trigger("click");

.trigger是否可以取消选中单选按钮的状态,即使它被点击了?

如果存在此问题,是否有解决方法?

我触发了多部分表单的下一个按钮,因此用户只需单击一个单选按钮进行选择,然后进入下一部分。我面临的问题是表单中有条件字段依赖于单选按钮选择显示与否。在这种情况下,他们不会显示,因为触发器正在弄乱单选按钮。

感谢。

:: UDPDATE :: 我确信这是一个时间问题。通过设置超时1秒,它的功能完全符合预期。

  jQuery(".frm_radio").click(function(){
      jQuery('.frm_button_submit').trigger("click");
  });

我认为正确的答案是确保在点击触发器触发前检查无线电。有什么想法吗?

2 个答案:

答案 0 :(得分:0)

您可以在以下复选框中使用更改事件:

$(".frm_radio").change(function(){
   if(this.checked){
     $('.frm_button_submit').trigger("click");
   }
});

答案 1 :(得分:0)

&#13;
&#13;
$(function() {
  var clickEvent = setInterval(function() {
    if ($('input[type=radio][name*=item_meta]:checked').length > 0) {
      $('.frm_button_submit').trigger('click');
      clearInterval(clickEvent);
    }
  }, 100);
});
$(document).on('click', '.frm_button_submit', function() {
  alert('frm_button_submit has been clicked (' + $('input[type=radio][name*=item_meta]:checked').val() + ')');
});
&#13;
.frm_radio input[type=radio] {
  display: none;
}

.frm_radio label {
  cursor: pointer;
  border: 1px solid black;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="frm_opt_container">
  <div class="frm_radio">
    <label for="field_d141k-1" class="">
                                <input type="radio" name="item_meta[71]" id="field_d141k-1" value="General Enquiry" data-reqmsg="Please make a selection so we know how to direct your enquiry"> General Enquiry</label>
  </div>
  <br />
  <div class="frm_radio">
    <label for="field_d141k-2" class="selectid">
                                <input type="radio" name="item_meta[71]" id="field_d141k-2" value="Make an Appointment" data-reqmsg="Please make a selection so we know how to direct your enquiry"> Make an Appointment</label>
  </div>
</div>

<br />
<button class="frm_button_submit" type="submit">Next</button>
&#13;
&#13;
&#13;

此代码仅在第一次检查单选按钮时起作用,因为已清除setIntervel功能。如果您需要在click事件和所有事件中进行一些验证,我们需要在更改单选按钮的值时再次添加setIntervel。