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

Question

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

如果客户选择收音机 1，我想禁用 adresInput，如果客户选择收音机 2，我想将其关闭。你能指出我的脚本有什么问题吗？谢谢！

脚本：

$(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') 用于检查单选按钮是否被选中

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

  });
});

Answer 2

好吧，您可以使用 .is(':checked') selector. Also, please keep in mind to fill the input or textarea descriptions (e. g. You address or the correct one: Your address) with a placeholder 检查已检查的无线电输入，而不是将实际值放入其中。

所以您的代码的更简单版本 （带有 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>

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

Radio input that dosen't work for some reason with method on change

forms

jquery

if-statement

input

radio