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

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 >
                        <input  type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
                        <label  for="profession1">Security guard</label>
                    </div>
                    <div >
                        <input  type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
                        <label  for="profession2">Welder</label>
                    </div>
                           
                </div>
                   <h2>Expected salary</h2>
                <div>
                    <div >
                        <input  type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1" checked="">
                        <label  for="salary1">1000 EUR</label>
                    </div>
                    <div >
                        <input  type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
                        <label  for="salary2">1500 EUR</label>
                    </div>
                    <div >
                        <input  type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3">
                        <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.

CodePudding user response：

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 >
    <h2>Select profession</h2>
    <div>
      <div >
        <input  type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
        <label  for="profession1">Security guard</label>
      </div>
      <div >
        <input  type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
        <label  for="profession2">Welder</label>
      </div>
    </div>
    
    <h2>Expected salary</h2>
    <div>
      <div >
        <input  type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1">
        <label  for="salary1">1000 EUR</label>
      </div>
      <div >
        <input  type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
        <label  for="salary2">1500 EUR</label>
      </div>
      <div >
        <input  type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3" disabled>
        <label  for="salary3">3500 EUR</label>
      </div>
    </div>
  </div>
  <div >
    <h2>Select profession examle 2</h2>
    <div>
      <div >
        <input  type="checkbox" name="profession" value="1" data-profession="profession_11" id="profession11" checked="">
        <label  for="profession1">Security guard</label>
      </div>
      <div >
        <input  type="checkbox" name="profession" value="2" data-profession="profession_21" id="profession21">
        <label  for="profession2">Welder</label>
      </div>
    </div>
    <h2>Expected salary examle 2</h2>
    <div>
      <div >
        <input  type="checkbox" name="salary" value="1" data-profession="profession_11" id="salary11">
        <label  for="salary1">1000 EUR</label>
      </div>
      <div >
        <input  type="checkbox" name="salary" value="2" data-profession="profession_11" id="salary21">
        <label  for="salary2">1500 EUR</label>
      </div>
      <div >
        <input  type="checkbox" name="salary" value="3" data-profession="profession_21" id="salary31">
        <label  for="salary3">3500 EUR</label>
      </div>
    </div>
  </div>
</div>