[英]Hiding / showing a checkboxes based on a previously selected checkbox (based on the data-attribute) jquery
我不知道如何根据基于数据属性（数据专业属性）的选择隐藏/显示复选框。
代码： 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');
谢谢您的帮助。
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>
使用基于已选中/未选中的单选按钮的自定义数据属性显示/隐藏容器
[英]Showing/Hiding a container using custom data-attribute based on a radio button that's checked/unchecked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.