由于某种原因无法使用更改方法的无线电输入



老实说,我发现了类似的主题,但我找不到在脚本中应用推荐解决方案的正确方法,也许我有点累了,很抱歉耽误你的时间。

如果客户选择radio1,我想禁用adresInput,如果客户选择了radio2,我想将其返回。你能指出我的剧本出了什么问题吗?非常感谢。

脚本:

$(document).ready(function(){
radioA();
$("#gridRadios1,#gridRadios2").change(radioA());
})
}
function radioA(){
radioG = $("#gridRadios1");
adresInput = $("#validationCustom05");
if(radioG.attr("checked")){adresInput.attr("disabled", "disabled")}else{adresInput.removeAttr("disabled")};
}

HTML:

<div class="col-md-3 mb-3">
<fieldset class="form-group">
<legend class="col-form-label pt-0">I am from:</legend>
<div class="col-sm-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
This city
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Out of the city
</label>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3 mb-3 disabled">
<label for="validationCustom05">Address</label>
<textarea rows="4" cols="50" class="form-control" id="validationCustom05" value="" required disabled>You address</textarea>
<div class="invalid-feedback">
Tell me your address!
</div>
</div>
</div>

好吧,您可以使用.is(':checked')选择器检查已检查的无线电输入。此外,请记住用placeholder填充inputtextarea描述(例如You address或正确的描述:Your address(,而不是在其中输入实际值。

因此,代码(带有条件(三元(运算符?:(的更简单版本应该是这样的:

var radioG = $("#gridRadios1");
var adresInput = $("#validationCustom05");
function radioA() {
radioG.is(':checked') ?
adresInput.attr("disabled", "disabled") :
adresInput.removeAttr("disabled");
}
$(document).ready(function() {
radioG.attr("checked", true);
radioA();
})
$('input[name="gridRadios"]').change(radioA);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 mb-3">
<fieldset class="form-group">
<legend class="col-form-label pt-0">I am from:</legend>
<div class="col-sm-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
This city
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Out of the city
</label>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3 mb-3 disabled">
<label for="validationCustom05">Address</label>
<textarea rows="4" cols="50" class="form-control" id="validationCustom05" value="" placeholder="Your address" required disabled></textarea>
<div class="invalid-feedback">
Tell me your address!
</div>
</div>
</div>

is(':checked'(用于检查单选按钮是否已选中

$(function(){
$('input[type="radio"]').click(function(){
if ($('#gridRadios1').is(':checked'))
{
$("#validationCustom05").prop('disabled', true);
}

if ($('#gridRadios1').is(':checked'))
{
$("#validationCustom05").prop('disabled', false);
}
});
});

最新更新