多个单选按钮，一个选中

Question

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

我有一个页面，用户可以选择他们想要预约的日期。然而，我们给他们多选择在这一天，柜面的第一选择是完全

单选按钮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/

编辑： 非常感谢您的答案。

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

Answer 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

Answer 2

认为它很简单..只需启用其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已经具有所有元素。而这里的一个fiddle at jsFiddle.net

Answer 3

一些更多的重构的代码：

$('.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); 
}); 

Answer 4

这可能是你在找什么：

$('.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); 

});