Radio Control problem

Wappler General Need Help
1

Hello, I’m not being able to solve a problem with the radio buttons. I shouldn’t be able to select more than one radio at the same group.

image
image1418×242 15.2 KB

this is my code:

<div class="form-group row">
							<legend class="col-sm-2 col-form-label">Some radios</legend>
							<div class="form-group" id="input1_group" is="dmx-radio-group" dmx-bind:value="QueryEdificio.data.queryEdificio[0].categoria">
								<div class="form-check">
									<input class="form-check-input" type="radio" value="1" id="cat1" name="cat1">
									<label class="form-check-label" for="cat1">First radio</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="2" id="cat2" name="cat2">
									<label class="form-check-label" for="cat2">Second radio</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="3" id="cat3" name="cat3">
									<label class="form-check-label" for="cat3">Third radio</label>
								</div>
							</div>
						</div>
2

Radio buttons in a same group should have same names and in your code the names are different.
Please set the same name for each of them.

1 Like
3

Thanks! The readonly condition is not working, any idea? On inputs it’s working correctly.

I shouldn’t be able to click on the radio control.

image
image1418×242 20 KB 

<div class="form-group row">
							<legend class="col-sm-2 col-form-label labelRight align-self-center">Categoría</legend>
							<div class="form-group" id="input1_group" is="dmx-radio-group" dmx-bind:value="QueryEdificio.data.queryEdificio[0].categoria">
								<div class="form-check">
									<input class="form-check-input" type="radio" value="1" id="cat1" name="item" dmx-bind:readonly="readonly.value == 0">
									<label class="form-check-label" for="cat1">1ra categoría</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="2" id="cat2" name="item" dmx-bind:readonly="readonly.value == 0">
									<label class="form-check-label" for="cat2">2da categoría</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="3" id="cat3" name="item" dmx-bind:readonly="readonly.value == 0">
									<label class="form-check-label" for="cat3">3ra categoría</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="4" id="cat4" name="item" dmx-bind:readonly="readonly.value == 0">
									<label class="form-check-label" for="cat3">4ta categoría</label>
								</div>
							</div>
						</div>
4

The readonly attribute is not supported by radio inputs.
Learn more at: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly