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

Question

说实话，我发现了类似的主题，但我找不到正确的方法在我的脚本中应用推荐的解决方案，也许我有点累了，非常抱歉占用您的时间。

如果客户选择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>

Answer 1

好吧，您可以使用.is(':checked') 选择器检查选中的无线电输入。另外，请记住用placeholder 填写input 或textarea 描述（例如You address 或正确的：Your address），而不是输入实际值他们。

所以你的代码的一个更简单的版本（带有conditional (ternary) operator ?:）应该是这样的：

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>

Answer 2

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

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

  });
});