CODEWITHSUNDEEP
javascriptjqueryhtmlradio-group
mskuratowski
mskuratowski

Reputation: 4124

Only one check for radios with different names

I have in my code many radio inputs with different names but with data-group-name attribute.

There should be only one radio button checked for a group at a time.

Here's my example input and JS:

$('input[type="radio"]').change(function() {
  $(this).attr('checked', true).val("true");
  var groupName = $(this).attr('data-group-name');
  $('input[type="radio"][data-group-name="' + groupName + '"]').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio21" name="Group[21].Value" value="true" type="radio">
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio22" name="Group[22].Value" value="true" type="radio">
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="23-group" id="radio23" name="Group[23].Value" value="true" type="radio">

But still, I can check many radios.

Upvotes: 1

Views: 86

Answers (3)

Barmar
Barmar

Reputation: 780724

You should put your handler on the click event, not change. If the box is already checked, clicking on it doesn't change it, so the event never fires.

$('input[type="radio"]').click(function() {
  var groupName = $(this).attr('data-group-name');
  $('input[type="radio"][data-group-name="' + groupName + '"]').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio21" name="Group[21].Value" value="true" type="radio">
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio22" name="Group[22].Value" value="true" type="radio">
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="23-group" id="radio23" name="Group[23].Value" value="true" type="radio">

Upvotes: 0

Bryro
Bryro

Reputation: 243

$('input[type="radio"]').change(function () {
	$('input[type="radio"][data-group-name="' + $(this).attr('data-group-name') + '"]').prop('checked', false);
		$(this).prop("checked",true); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio21" name="Group[21].Value"  type="radio">
<input class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio22" name="Group[22].Value"  type="radio">
<input class="custom-control-input ml-1 mr-1" data-group-name="23-group" id="radio23" name="Group[23].Value"  type="radio">

Upvotes: 0

Taplar
Taplar

Reputation: 24965

Your logic appears to work fine, provided you take the checked="checked" off of them so they are applicable to "change"

$('input[type="radio"]').change(function() {
  $(this).attr('checked', true).val("true");
  var groupName = $(this).attr('data-group-name');
  $('input[type="radio"][data-group-name="' + groupName + '"]').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio21" name="Group[21].Value" value="true" type="radio">
<input class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio22" name="Group[22].Value" value="true" type="radio">
<input class="custom-control-input ml-1 mr-1" data-group-name="23-group" id="radio23" name="Group[23].Value" value="true" type="radio">

Upvotes: 1

Related Questions