I have created a custom radio button. My issue with tabindex. When I press the tab then it's not selecting the radio button. I am getting the issue in the Labelname1.
How can I resolve this?
$('input[name="tod-app"]').click(function() {
if ($('#todNO').is(':checked')) {
$('.is_hide').show();
} else {
$('.is_hide').hide();
}
});[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #2a2e3e;
}
[type="radio"]:not(:checked)+label:before {
border: 2px solid #ccc;
}
[type="radio"]:checked+label:before {
border: 2px solid #5E1DD6;
}
[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
content: '';
width: 10px;
height: 10px;
background: #5E1DD6;
position: absolute;
top: 6px;
left: 6px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.is_hide {
display: none;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="form-group mb-4">
<label for="" class="form-label">City</label>
<select name="city" class="form-select" tabindex="1">
<option value="" selected="" disabled="">Select city</option>
<option value="">xyz</option>
</select>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="form-group text-center position-relative todWrap">
<label for="" class="form-label">Labelname1
</label>
<div class="d-flex justify-content-center todWrapRadio">
<div class="form-check ps-0">
<input type="radio" id="todYES" class="radio-custom" name="tod-app" value="1" tabindex="2">
<label for="todYES" class="radio-custom-label">Yes</label>
</div>
<div class="form-check">
<input type="radio" id="todNO" class="radio-custom" name="tod-app" value="0">
<label for="todNO" class="radio-custom-label">No</label>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="form-group is_hide">
<label for="" class="form-label">This field is hidden and enable when choose NO from Lablename1 </label>
<div class="d-flex">
<div class="form-check ps-0">
<input type="radio" id="lYES" class="radio-custom" name="limit" value="1">
<label for="lYES" class="radio-custom-label">Yes</label>
</div>
<div class="form-check">
<input type="radio" id="lno" class="radio-custom" name="limit" value="0">
<label for="lno" class="radio-custom-label">No</label>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="form-group position-relative">
<label for="" class="form-label">Labelname2
</label>
<div class="d-flex" id="grossErrorshow">
<input type="text" class="form-control input-border-radiusR0 border-end-0" aria-label="Text input with dropdown button" name="gross-1" tabindex="3">
<div class="custom-dropdown">
<select class="form-select input-border-radiusL0" aria-label="Default select example" name="roadunit" tabindex="4">
<option value="mt">Sqr Mtr</option>
<option value="sf">Sqr Fts</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="form-group mb-4 position-relative">
<label for="" class="form-label">Labelname3
</label>
<div class="d-flex" id="roadWideningErrorshow">
<input type="text" class="form-control input-border-radiusR0 border-end-0" aria-label="Text input with dropdown button" name="road1" tabindex="5">
<div class="custom-dropdown">
<select class="form-select input-border-radiusL0" aria-label="Default select example" name="roadWidenUnit" tabindex="6">
<option value="mt">Sqr Mtr</option>
<option value="sf">Sqr Fts</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="" class="form-label">Labelname4</label>
<select class="form-select" aria-label="Default select example" name="width-access" tabindex="7">
<option selected="" disabled="">Select access</option>
<option value="0-9">
< 9 Mtr</option>
<option value="9-12">9 to 12 mt</option>
<option value="12-15">12 to 15 mt</option>
<option value="15-18">15 to 18 mt</option>
<option value="18-24">18 to 24 mt</option>
<option value="24-30">24 to 30 mt</option>
<option value="30-0">> 30 mt</option>
</select>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="form-group customrange position-relative">
<div class="d-flex justify-content-between">
<label>Labelname5
</label>
<div class="loadinrangevalue"><input type="text" name="loading" value="0" max="100" tabindex="8">%</div>
</div>
<input type="range" class="form-range customRange" value="0" min="0" max="100">
<div class="d-flex justify-content-between">
<span>0</span>
<span>100</span>
</div>
</div>
</div>
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<input type="checkbox" id="aggred" name="iaggred" value="1" tabindex="9"> I agree to the <a href="">terms and condition</a>
<div class="iaggrederror"></div>
</div>
<div class="pt-3 pb-3">
<input type="submit" name="submit" value="Calculate" class="btn themeBg btn-black" tabindex="10">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
