#javascript #jquery #checkbox
#javascript #jquery #флажок
Вопрос:
У меня есть HTML-код, в котором у меня есть 7 полей в div.Ниже приведен HTML-код.
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="true">
<div class="panel-body">
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
<label>Certification</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
<label>Functional</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeLCM" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>LCM</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypePerformance" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>Performance</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeResilience" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>Resilience</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeSecurity" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>Security</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>System verification</label>
</div> 1) Теперь, если я установлю флажок «Сертификация», все остальные должны быть автоматически отключены.
2) Если проверка системы проверена (все остальные автоматически проверяются и отключаются серым цветом) (Сертификация на No и отключается серым цветом)
3) если другие параметры выбираются индивидуально, то (Сертификация и проверка системы на нет и выделены серым цветом)
пожалуйста, дайте мне знать, как я могу получить функциональность
Ниже приведен код, который я пробовал.
$('input[name="validationTypesDone"]').on('change', function() {
var val = $(this).attr('value');
switch(val) {
case 'Certification':
if($(this).is(':checked')){
$('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', true);
$(this).prop('disabled', false)
} else {
$('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', false);
}
break;
case 'System verification':
if($(this).is(':checked')){
$('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', true);
$('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('checked', true);
$('input[id="validationTypeCertification"]').prop('checked', false);
$(this).prop('disabled', false)
} else {
$('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', false);
}
break;
}
}); вышесказанное работает для вариантов 1 и 2 .. Для 3-го варианта вы можете дать мне лучшее решение.
Комментарии:
1. опубликуйте также свой код, который вы уже пробовали..
2. я обновил вопрос своим фрагментом кода, который я пытаюсь… но не удается получить 3-й вариант.
3. Должны ли они быть сняты и отключены?
4. Он должен быть снят и отключен
Ответ №1:
В этой демонстрации реализована только одна из функций, проверка которых Certification отключила все остальные. Надеюсь, вы сможете реализовать два других
Здесь селектор jquery проверяет, установлен ли флажок ввода с именем validationTypesDone , и если id это validationTypeCertification , то получает все остальные входные данные с другим именем и отключает их с помощью prop функции
$('input[name="validationTypesDone"]').on('change', function() {
if ($(this).prop('checked') amp;amp; $(this)[0].id === 'validationTypeCertification') {
$('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', true);
$(this).prop('disabled', false)
} else {
$('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', false);
}
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="true">
<div class="panel-body">
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
<label>Certification</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
<label>Functional</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeLCM" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>LCM</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypePerformance" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>Performance</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeResilience" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>Resilience</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeSecurity" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>Security</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 ">
<input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
<label>System verification</label>
</div> Комментарии:
1. Спасибо, это отлично работает для сертификации… но мне нужны и другие.