Question

我有两个Bootstrap按钮充当单选按钮：

我想做的是更改隐藏表单字段的值，然后根据选择内容将其提交。不幸的是，我对每个州都有两个隐藏的表单域。因此，如果选择“访问”，我想将表单中名称为“ q_visited”的隐藏输入的值设置为true。这很完美。但是，我还想将其他输入设置为false ...捕获取消选择事件的最佳方法是什么？还是有一个更简单的解决方案？

代码：

$(".filter_links input").on('change', function() {
  var checkbox = $("#q_"+this.id)
  checkbox.attr("value", this.checked);
  $("form#search_form").submit()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='btn-group filter_links' data-toggle='buttons'>
  <label class='btn btn-primary'>
    <input id='visited' type='radio'>Visited</input>
  </label>
  <label class='btn btn-primary'>
    <input id='not_visited' type='radio'>Not visited</input>
  </label>
</div>

当前，这仅会更新被单击的按钮的字段，但其他值保持不变。

编辑：

好的，因此要澄清的问题是，尽管按钮充当收音机组，但隐藏的表单字段却不能。这与某些后端要求有关。表单基本上如下所示：

<form>
   <input class="form-control hidden" value="false" type="hidden" name="q[visited]" id="q_visited" />
   <input class="form-control hidden" value="false" type="hidden" name="q[not_visited]" id="q_not_visited" />
</form>

Answer 1

如果我正确理解了您的问题，则可能是在对单选按钮进行了分组之后。这样只能选择一个。在您的情况下，请像下面一样添加到两个输入name='group-name'中。

<label class='btn btn-primary'>
  <input id='visited' type='radio' name="radio-btn" value="Visited">Visited<br>
</label>
<label class='btn btn-primary'>
  <input id='not_visited' type='radio' name="radio-btn" value="Not visited">Not visited<br>
</label>

如您所愿，对隐藏的输入执行相同的操作。将可见按钮链接到不可见按钮的代码与您已经拥有的代码非常相似。更改一个将更改另一个，并且两个更改都是一个组，因此将仅选择一个单选按钮。这是附带的代码。

$(document).ready(function() {
  $(".filter_links input").on('change', function() {
    var checkbox = $("#q_"+this.id)
    checkbox.prop("checked", this.checked);
    $("form#search_form").submit();
  })
});

更新
因为隐藏的输入不能具有相同的名称。我会将隐藏的输入组包装在div中。然后遍历每个孩子，然后取消选中它。然后检查与单击的可见对象相对应的一个。这应该做的工作。我也更新了指向JsFiddle的链接。

$(document).ready(function() {
  $(".filter_links input").on('change', function() {
    // get all the imidiate children of the hidden inputs div
    var inputs = $('.hidden-inputs').children()
    inputs.each(function(i) {
        // iterate over them and disable all
        $(inputs[i]).prop('checked', false);
    });
    // select and set check the corresponding hidden input 
    var checkbox = $("#q_"+this.id)
    checkbox.prop("checked", this.checked);
    $("form#search_form").submit();
  })
});

在此JsFiddle

中查看实际运行情况

我可以在Bootstrap单选按钮组中的取消选择的项目上捕获什么事件？

1 个答案: