根据选定的单选按钮更改选项值答案

【问题标题】：change option values based on selected radio button根据选定的单选按钮更改选项值
【发布时间】：2018-03-24 23:04:30
【问题描述】：

我有 1 个要求，我正在努力实现。

1) 根据选择的单选按钮隐藏/取消隐藏选择标签

代码笔：DEMO

用户应该只能“选中”未选中的单选按钮。例如。如果单选按钮 A 被“选中”，则可以选中单选按钮 B，但不能选中按钮 A。反之亦然。

$('#award, #year').click(function(){
// $('input[type="radio"]').not(':checked').prop('checked', false);
$("input[type='radio']").each(function() {

if($(this).is(':checked')){
  $(this).prop('checked', true);
  $('#awardOptions').toggleClass('hide');
  $('#yearOptions').toggleClass('hide'); 
}else{
  $(this).prop('checked', false);
   $('#awardOptions').toggleClass('hide');
  $('#yearOptions').toggleClass('hide'); 
}
});
});

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

问题是你的if 条件得到满足，那么你的else 条件也得到满足。考虑到您在两种情况下都切换了目标的可见性，实际上您成功地显示了正确的元素，然后立即再次隐藏它。

要解决您的问题，您实际上需要做的就是完全删除您的 else 语句。这可以看到 here。

此外，您实际上不需要将checked prop 设置为true 和$(this).prop('checked', true)，因为它已经为真（因为逻辑进入if($(this).is(':checked'))有条件的）。

更新

以上问题导致点击所选输入仍然有切换。

这可以通过简单地更改逻辑以完全隔离这两种行为来解决，然后强制所需元素的可见性和另一个的不可见性：

// Toggle award/year slider
$('#award').click(function(){
  $('#awardOptions').show();
  $('#yearOptions').hide(); 
});
$('#year').click(function(){
  $('#awardOptions').hide();
  $('#yearOptions').show(); 
});

这是有效的，因为无论当前状态如何，它都会起作用；隐藏和显示是明确的，而不是基于切换。

现有的 CodePen 已被修改为包含此内容，可以再次找到 here。

希望这会有所帮助！ :)

【讨论】：

这是我之前遇到的。缺陷是，如果我在“选中”后单击“年份”或“奖励”按钮两次，它将更改选择标签，这是我想要禁用的属性。
是的。将它们分成两个点击功能使其更简单。我会考虑让它们成为 1 个函数，但使用三元

【解决方案2】：

我为你找到了解决方案：

$('#award, #year').click(function(){
  if($("input[type='radio']").is(':checked')){
    $(this).prop('checked', true);
    $('#awardOptions').addClass('hide');
    $('#yearOptions').addClass('hide'); 
    console.log("Add Class");
  }else{
    $(this).prop('checked', false);
    $('#awardOptions').removeClass('hide');
    $('#yearOptions').removeClass('hide'); 
    console.log("Remove Class");
  }
});

你应该删除 each() 函数，因为它调用了两次。

【讨论】：