多个单选按钮，选择一个

Multiple radio buttons, one selected

本文关键字：一个 选择 单选按钮      更新时间：2023-09-26

标题可能有点模糊。所以让我来解释一下。

我有一个页面，用户可以选择他们想在哪一天进行预约。然而，我们为他们提供了这一天的多种选择，以防第一选择是完整的

单选按钮HTML:

<input type="radio" class="my-radio" value="monday" name="my_form[day][choice1][]"
id="monday1"/>
<label for="monday1">Monday</label>
<input type="radio" class="my-radio" value="tuesday" name="my_form[day][choice1][]"
id="tuesday1"/>
<label for="tuesday1">Tuesday</label>
<input type="radio" class="my-radio" value="wednesday" name="my_form[day][choice1][]"
id="wednesday1"/>
<label for="wednesday1">Wednesday</label>
<input type="radio" class="my-radio" value="thursday" name="my_form[day][choice1][]"
id="thursday1"/>
<label for="thursday1">Thursday</label>
<input type="radio" class="my-radio" value="friday" name="my_form[day][choice1][]"
id="friday1"/>
<label for="friday1">Friday</label>
<input type="radio" class="my-radio" value="saturday" name="my_form[day][choice1][]"
id="saturday1"/>
<label for="saturday1">Saturday</label>

这又重复了两次。不过，ID和名称都发生了更改。所以第二次是（星期一）；id=monday2，name=my_form[day][choice2][]，依此类推。

所以要说清楚。3行无线电，所有值都相同，但id和名称不同。

现在，当星期一被选中时，不管在哪一行，我都想禁用所有其他星期一。现在，如果我选择"星期二"，那么所有的星期一都应该重新启用。

我使用jQuery的第一部分；

jQuery('.my-radio').change(function () {
// Get all elements associated to value, but the currently selected radio.
var associates = jQuery('.my-radio[value="' + jQuery(this).val() + '"]').not("#" + jQuery(this).attr('id'));
  // Disable every element that we found
  jQuery(associates).each(function(){
     jQuery(this).prop('disabled', true);
  });
});

现在我唯一的问题是第二部分。重新启用以前禁用的收音机。

一个JSFiddle，使其更加清晰；http://jsfiddle.net/Hr9h2/1/

编辑：非常感谢你的回答。

但是，我忘了提一下，例如，星期一是不允许选择三次甚至两次的。

您要查找的功能是通过启用所有单选按钮、循环所有选中的单选按钮并禁用任何具有相同值的单选按钮来创建的。这样，它可以与你想要的任意多行单选按钮配合使用：

$('.my-radio').on('change', function () {
    $('.my-radio').prop('disabled',false).filter(':checked').each(function() {
        $('.my-radio[value="' + this.value + '"]:not(:checked)').prop('disabled', true);
    });
});

FIDDLE

对代码进行更多重构：

$('.my-radio').change(function () {
    //enable all radio buttons
    $(".my-radio").prop("disabled", false);
    // Disable all elements associated to value
    $('.my-radio[value="' + this.value + '"]').not(this).prop('disabled', true);
});

认为这很简单。。在禁用特定单选按钮之前，只需在其change事件上启用所有单选按钮。

这是JS

jQuery('.my-radio').change(function () {
    jQuery('.my-radio').prop('disabled', false); //<---here
    // Disable all elements associated to value
    var associates = jQuery('.my-radio[value="' + jQuery(this).val() + '"]').not("#" + jQuery(this).attr('id'));
    associates.prop('disabled', true);
});

注意：

您不必使用each循环来获取所有关联。associate变量将已经具有所有元素。这是jsFiddle.net上的一个小提琴

这可能就是您想要的：

$('.my-radio').click(function () {
    // When a radio button is clicked
    $('.my-radio').each(function () {
        // Enables all radios buttons
        $('.my-radio').prop('disabled', false);
    });
    // Disables all radio buttons with same value as this, except this one
    $('input[value="' + $(this).val() + '"]').not(this).prop('disabled', true);
});
相关文章：