Question

我试图用2个选项做一个单选按钮：是和否（是一个长形式），但是在这篇文章中，我需要在用户选择是或否时检查被拒绝或已完成的无线电，已拒绝已完成按钮，已拒绝已完成按钮，用户无法手动更改此按钮。

1 - 当用户选择yes时：必须检查已完成 2 - 如果用户选择否，则必须检查拒绝。 3 - 如果用户将yes改为no或no改为yes选项，我们将回到上面的规则1或2。

然而，我被卡住了，因为当我更改选项时，单选按钮只会改变一次。之后没有任何事情发生。

这是我现在的代码：https://jsfiddle.net/bw21cxo5/1/

HTML：

select_related

js：（jquery 2.2）

class PhoneInline(admin.StackedInline):
    model = Phone
    extra = 2

    def get_queryset(self, request):
        return super(PhoneInline, self).get_queryset(request).select_related('phone_owner', 'phone_owner__ owner_company')

Answer 1

您可以将复选框相互关联。使用data属性的这样的东西可以工作：

更新了HTML

<label for="yes">
    <input type="radio" name="radio1" value="yes" id="yes" class="option-yes" data-partner="accomplished">Yes
</label>
<label for="no">
    <input type="radio" name="radio1" value="no" id="no" class="option-no" data-partner="refused">No
</label>

<强>的JavaScript

$('input[name="radio1"]').on('change', function() {
    $('input[name="radio2]').prop('checked',false);
  $('#'+$(this).data('partner')).prop('checked',true);
});

JS小提琴：https://jsfiddle.net/igor_9000/bw21cxo5/3/

希望有所帮助！

Answer 2

检查单选按钮时，最好使用普通JS。

试试这个：

$('input[name="radio1"]').on('change', function() {

  if ($(this).hasClass('option-no')) {
    $('#refused').get(0).checked = true;
  } else {
    $('#accomplished').get(0).checked = true;
  }
});

您的代码存在问题，而不是attr您应该使用prop。 Here是他们之间的区别。

Demo

Answer 3

您的代码运行良好，只需要一点修复：

$(function () {
  $('input[name="radio1"]').on('change', function() {
    if ($(this).hasClass('option-no')) {
      $('#refused').prop('checked', true);
    } else {
      $('#accomplished').prop('checked', true);
    }
  });
});

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>


<div>
    <label for="yes">
        <input type="radio" name="radio1" value="yes" id="yes" class="option-yes">Yes
    </label>
    <label for="no">
        <input type="radio" name="radio1" value="no" id="no" class="option-no">No
    </label>
</div>
<br><br>
<div>
    <label for="refused">
        <input type="radio" name="radio2" id="refused" disabled> Refused
    </label>
    <label for="accomplished">
        <input type="radio" name="radio2" id="accomplished" disabled> Accomplished
    </label>
</div>

更改时单选按钮上的奇怪错误

3 个答案: