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

Posted 2023-03-27

【中文标题】由于某种原因无法使用更改方法的无线电输入

【英文标题】：Radio input that dosen't work for some reason with method on change

【发布时间】：2021-01-20 05:51:33

【问题描述】：

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

如果客户选择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")elseadresInput.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>

【参考方案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>

【讨论】：

我爱你胜过我没有的孩子和妻子！但是真的非常感谢你！你是终极大师，请让我做你的追随者！如果我能为你做任何事，请告诉我！太感谢了 ！大爱！

【参考方案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);
    

  );
);