根据先前选中的复选框隐藏/显示复选框（基于数据属性）jquery

Question

我不知道如何根据基于数据属性（数据专业属性）的选择隐藏/显示复选框。

代码：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);
            }
        })

});

现在我想比较两个输入中的数据专业，如果它相等或不同 - 取决于 .change - 显示或隐藏整个复选框。

在这种情况下，我只想要保安人员 1000 欧元和 1500 欧元，焊工只需要 3500 欧元。

如下所示：

$('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');

感谢您的帮助。

Answer 1

2种方式满足您的要求：

禁止输入其他职业（未勾选）
隐藏其他职业的输入（未勾选）

代码相同：

$('.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>

根据先前选中的复选框隐藏/显示复选框（基于数据属性）jquery

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

html

javascript

jquery