如果我 select 一个复选框,我停用另一个
If I select a checkbox, I deactivate another
2021 年 10 月 21 日更新 - 我仍然需要一个解决方案。
情况如下:正如您在下面的可视化示例中所见。我有四个 - 按钮收音机 - 我需要做一个事件,当我 select 组合的选项“否”时,我会自动禁用字段中的两个 select 离子。
如果 selected 为“是”,则另外两个 select 离子必须保持活性。我的问题是因为四个邮票是“单选按钮”而不是复选框。
视觉示例:
<-- 体外受精 -->
⬜ 是
⬜ 否
<-- 如果试管婴儿卵子 -->
⬜ 拥有
⬜ 来自捐赠者
而第三段代码是HTML部分,供分析。
我有这个片段:
Code 1
Base PHP code I'm using.
<!-- IVF fertilization -->
<div class='col-sm-4'>
<?=_('IVF fertilization')?>
<div>
<input type="radio" id="yesFe" name="niptData_ivfFertilization" value='1'
<?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '1' OR $registration->test->data->ivfFertilization == '1') ? 'checked' : ''?>
>
<label for="yesFe" class='smallLabel'><?=_('Yes')?></label>
</div>
<div>
<input type="radio" id="noFe" name="niptData_ivfFertilization" value='0'
<?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '0' OR $registration->test->data->ivfFertilization == '0') ? 'checked' : ''?>
>
<label for="noFe" class='smallLabel'><?=_('No')?></label>
</div>
</div>
<!-- if IVF ovum -->
<div class='col-sm-4'>
<?=_('If IVF ovum')?>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value='1' data-validation=""
<?=($_SESSION['OPTIONAL']['niptData_ovum'] == '1' OR $registration->test->data->ovum == '1') ? 'checked' : ''?>
>
<label for="ownOv" class='smallLabel'><?=_('Own')?></label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" value='2' data-validation=""
<?=($_SESSION['OPTIONAL']['niptData_ovum'] == '2' OR $registration->test->data->ovum == '2') ? 'checked' : ''?>
>
<label for="fromADonor" class='smallLabel'><?=_('From a donor')?></label>
</div>
<br>
</div>
CODE 2
Script that working to solve the problem.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#new_user_form *').filter(':radio').change(function() {
if(this.id=='noFe' && this.value=='0' && $(this).is(':checked')) {
$('#new_user_form *').filter(':radio').each(function(){
if(this.id=='noFe' && this.value=='0') {
} else {
$(this).attr("checked",false);
}
});
}
if((this.id=='ownOv' || this.id=='fromADonor' && this.value=='0') {
var checkedId = this.id;
var checkedOrNot = $(this).is(':checked');
$('#new_user_form *').filter(':radio').each(function(){
if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
if(checkedOrNot) {
$(this).attr("disabled",true);
} else {
$(this).attr("disabled",false);
}
}
});
</script>
CODE 3
HTML code that was asked of me.
<div class="col-sm-4">
Pregnancy<span class="required">*</span>
<div class="has-error">
<input type="radio" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error" style="border-color: rgb(185, 74, 72);">
<label for="yesFe" class="smallLabel">Yes</label>
<span class="help-block form-error">Required field</span></div>
<div class="has-success">
<input type="radio" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style="">
<label for="noFe" class="smallLabel">No</label>
</div>
</div>
<div class="col-sm-4">
if FIVET, ovum<span class="optional"></span>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value="1" data-validation="">
<label for="ownOv" class="smallLabel">Own</label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" value="2" data-validation="">
<label for="fromADonor" class="smallLabel">
As a donor</label>
</div>
<br>
</div>
不知道我理解的对不对,解决方法如下:
1- 我删除了对那个问题不重要的代码
2- 我将 class 名称“secondis”添加到我将在单击复选框后禁用的元素
希望你得到你想要的
$("#yesFe").click(function(){
if ($(this).prop("checked") == true) {$("#secondissue").show();$(".secondis").prop('disabled', false);}
else {$("#secondissue").hide();$(".secondis").prop('disabled', true);}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
Pregnancy<span class="required">*</span>
<div class="has-error">
<input type="checkbox" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error " style="border-color: rgb(185, 74, 72);">
<label for="yesFe" class="smallLabel">Sì</label>
<span class="help-block form-error">Required field</span></div>
<div class="has-success">
<input type="checkbox" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style="">
<label for="noFe" class="smallLabel">No</label>
</div>
</div>
<div class="col-sm-4" id ="secondissue" style="display:none">
Se FIVET, ovuli<span class="optional"></span>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value="1" class="secondis" data-validation="" >
<label for="ownOv" class="smallLabel">Propri</label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" class="secondis" value="2" data-validation="" >
<label for="fromADonor" class="smallLabel">Da donatrice</label>
</div>
<br>
</div>
2021 年 10 月 21 日更新 - 我仍然需要一个解决方案。
情况如下:正如您在下面的可视化示例中所见。我有四个 - 按钮收音机 - 我需要做一个事件,当我 select 组合的选项“否”时,我会自动禁用字段中的两个 select 离子。
如果 selected 为“是”,则另外两个 select 离子必须保持活性。我的问题是因为四个邮票是“单选按钮”而不是复选框。
视觉示例:
<-- 体外受精 -->
⬜ 是 ⬜ 否
<-- 如果试管婴儿卵子 -->
⬜ 拥有 ⬜ 来自捐赠者
而第三段代码是HTML部分,供分析。
我有这个片段:
Code 1
Base PHP code I'm using.
<!-- IVF fertilization -->
<div class='col-sm-4'>
<?=_('IVF fertilization')?>
<div>
<input type="radio" id="yesFe" name="niptData_ivfFertilization" value='1'
<?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '1' OR $registration->test->data->ivfFertilization == '1') ? 'checked' : ''?>
>
<label for="yesFe" class='smallLabel'><?=_('Yes')?></label>
</div>
<div>
<input type="radio" id="noFe" name="niptData_ivfFertilization" value='0'
<?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '0' OR $registration->test->data->ivfFertilization == '0') ? 'checked' : ''?>
>
<label for="noFe" class='smallLabel'><?=_('No')?></label>
</div>
</div>
<!-- if IVF ovum -->
<div class='col-sm-4'>
<?=_('If IVF ovum')?>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value='1' data-validation=""
<?=($_SESSION['OPTIONAL']['niptData_ovum'] == '1' OR $registration->test->data->ovum == '1') ? 'checked' : ''?>
>
<label for="ownOv" class='smallLabel'><?=_('Own')?></label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" value='2' data-validation=""
<?=($_SESSION['OPTIONAL']['niptData_ovum'] == '2' OR $registration->test->data->ovum == '2') ? 'checked' : ''?>
>
<label for="fromADonor" class='smallLabel'><?=_('From a donor')?></label>
</div>
<br>
</div>
CODE 2
Script that working to solve the problem.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#new_user_form *').filter(':radio').change(function() {
if(this.id=='noFe' && this.value=='0' && $(this).is(':checked')) {
$('#new_user_form *').filter(':radio').each(function(){
if(this.id=='noFe' && this.value=='0') {
} else {
$(this).attr("checked",false);
}
});
}
if((this.id=='ownOv' || this.id=='fromADonor' && this.value=='0') {
var checkedId = this.id;
var checkedOrNot = $(this).is(':checked');
$('#new_user_form *').filter(':radio').each(function(){
if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
if(checkedOrNot) {
$(this).attr("disabled",true);
} else {
$(this).attr("disabled",false);
}
}
});
</script>
CODE 3
HTML code that was asked of me.
<div class="col-sm-4">
Pregnancy<span class="required">*</span>
<div class="has-error">
<input type="radio" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error" style="border-color: rgb(185, 74, 72);">
<label for="yesFe" class="smallLabel">Yes</label>
<span class="help-block form-error">Required field</span></div>
<div class="has-success">
<input type="radio" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style="">
<label for="noFe" class="smallLabel">No</label>
</div>
</div>
<div class="col-sm-4">
if FIVET, ovum<span class="optional"></span>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value="1" data-validation="">
<label for="ownOv" class="smallLabel">Own</label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" value="2" data-validation="">
<label for="fromADonor" class="smallLabel">
As a donor</label>
</div>
<br>
</div>
不知道我理解的对不对,解决方法如下:
1- 我删除了对那个问题不重要的代码 2- 我将 class 名称“secondis”添加到我将在单击复选框后禁用的元素
希望你得到你想要的
$("#yesFe").click(function(){
if ($(this).prop("checked") == true) {$("#secondissue").show();$(".secondis").prop('disabled', false);}
else {$("#secondissue").hide();$(".secondis").prop('disabled', true);}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
Pregnancy<span class="required">*</span>
<div class="has-error">
<input type="checkbox" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error " style="border-color: rgb(185, 74, 72);">
<label for="yesFe" class="smallLabel">Sì</label>
<span class="help-block form-error">Required field</span></div>
<div class="has-success">
<input type="checkbox" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style="">
<label for="noFe" class="smallLabel">No</label>
</div>
</div>
<div class="col-sm-4" id ="secondissue" style="display:none">
Se FIVET, ovuli<span class="optional"></span>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value="1" class="secondis" data-validation="" >
<label for="ownOv" class="smallLabel">Propri</label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" class="secondis" value="2" data-validation="" >
<label for="fromADonor" class="smallLabel">Da donatrice</label>
</div>
<br>
</div>