Hiding / showing a checkboxes based on a previously selected checkbox (based on the data-attribute) jquery

Question

I have no idea how to hide / show checkboxes depending on the choice based on the data-attribute (data-profession attribute).

Code: https://codepen.io/caqoga/pen/RwQyRaQ

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div>
            <div>
                  <h2>Select profession</h2>
                <div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
                        <label class="form-check-label" for="profession1">Security guard</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
                        <label class="form-check-label" for="profession2">Welder</label>
                    </div>
                           
                </div>
                   <h2>Expected salary</h2>
                <div>
                    <div class="form-check profession_1">
                        <input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1" checked="">
                        <label class="form-check-label" for="salary1">1000 EUR</label>
                    </div>
                    <div class="form-check profession_1">
                        <input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
                        <label class="form-check-label" for="salary2">1500 EUR</label>
                    </div>
                    <div class="form-check profession_2">
                        <input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3">
                        <label class="form-check-label" for="salary3">3500 EUR</label>
                    </div>
                                        
                </div>
            </div>
        </div>
</div>

$( document ).ready(function() { 

$('input[name="profession"]').change(function(){
            if (!$(this).is(':checked')) {
                $(this).prop('checked', true);
            } else {
                $(this).parent().siblings().find('input').prop('checked', false);
            }
        })

$('input[name="salary"]').change(function(){
            if (!$(this).is(':checked')) {
                $(this).prop('checked', true);
            } else {
                $(this).parent().siblings().find('input').prop('checked', false);
            }
        })

});

And now I would like to compare the data-profession in both inputs, if it is equal to or differs - depending on the .change - displaying or hiding the entire checkbox.

In this case, I would like only EUR 1000 and EUR 1500 for the Security Guard, and only EUR 3500 for the Welder.

Something like below:

$('input[name="profession"]').change(function(){

var idprof=$(this).attr('data-profession');
var idsalarytoprof=$('input[name="salary"]').attr('data-profession');
       
if (idprof == idsalarytoprof) {$('.proffesion_' + idsalarytoprof).show();} 
else {$('.proffesion_' + idsalarytoprof).hide();}
      
});
$('input[name="profession"]').trigger('change');

Thank you for your help.

Answer 1

2 ways for requirement of you :

Disable input of other profession (unchecked)
Hide input of other profession (unchecked)

Code same as :

 $('.example-1 input').change(function(){ let profession = $(this).data('profession') if (!$(this).is(':checked')) { $(this).prop('checked', true); } else { $(this).parent().siblings().find('input').prop('checked', false); $('.' + profession).find('input').attr('disabled',false) $('.' + profession).siblings(':not(.' + profession + ')').find('input').attr('disabled',true).prop('checked', false) } }) $('.example-2 input').change(function(){ let profession = $(this).data('profession') if (!$(this).is(':checked')) { $(this).prop('checked', true); } else { $(this).parent().siblings().find('input').prop('checked', false); $('.' + profession).removeClass('hide').find('input').attr('disabled',false) $('.' + profession).siblings(':not(.' + profession + ')').addClass('hide').find('input').attr('disabled',true).prop('checked', false) } })

 .example-2 .hide { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class="example-1"> <h2>Select profession</h2> <div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked=""> <label class="form-check-label" for="profession1">Security guard</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2"> <label class="form-check-label" for="profession2">Welder</label> </div> </div> <h2>Expected salary</h2> <div> <div class="form-check profession_1"> <input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1"> <label class="form-check-label" for="salary1">1000 EUR</label> </div> <div class="form-check profession_1"> <input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2"> <label class="form-check-label" for="salary2">1500 EUR</label> </div> <div class="form-check profession_2"> <input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3" disabled> <label class="form-check-label" for="salary3">3500 EUR</label> </div> </div> </div> <div class="example-2"> <h2>Select profession examle 2</h2> <div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_11" id="profession11" checked=""> <label class="form-check-label" for="profession1">Security guard</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_21" id="profession21"> <label class="form-check-label" for="profession2">Welder</label> </div> </div> <h2>Expected salary examle 2</h2> <div> <div class="form-check profession_11"> <input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_11" id="salary11"> <label class="form-check-label" for="salary1">1000 EUR</label> </div> <div class="form-check profession_11"> <input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_11" id="salary21"> <label class="form-check-label" for="salary2">1500 EUR</label> </div> <div class="form-check profession_21 hide"> <input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_21" id="salary31"> <label class="form-check-label" for="salary3">3500 EUR</label> </div> </div> </div> </div>

Hiding / showing a checkboxes based on a previously selected checkbox (based on the data-attribute) jquery

Question

1 answers

solution1
0 ACCPTED 2022-06-01 09:44:51

Hiding / showing a checkboxes based on a previously selected checkbox (based on the data-attribute) jquery

Question

1 answers

solution1 0 ACCPTED 2022-06-01 09:44:51

solution1
0 ACCPTED 2022-06-01 09:44:51