使用 jquery 通过单选启用/禁用输入

Question

带有单选按钮的表单。如果选中“Existing”，将启用“existingnumber”输入。它在选择过程中工作正常，但在加载时不起作用。加载时，输入“existingnumber”保持禁用状态，即使它已“选中”。这在提交表单时会出现问题，并且错误验证失败。我已经尝试在最后附加 .change() ，并创建一个我在准备好的文档上调用的函数，但这没有用。我想我错过了一些东西。也许我需要先获得价值？我有点jquery noob。<input type="radio" name="officephone" value="New" id="officephonenew" ><label for="officephonenew">New</label><br><input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked><label for="officephoneexisting">Existing</label><br><input type="text" name="existingnumber" placeholder="555-555-1234" /><br><input type="radio" name="officephone" value="No" id="officephoneno"><label for="officephoneno">Not required</label>$('input:radio[name="officephone"]').change(function(){    $('input[name="existingnumber"]').prop("disabled",true);    if($(this).attr('value') == 'Existing') {        $('input[name="existingnumber"]').prop("disabled", false);    }});https://jsfiddle.net/Cormang/sd8xaj9h/10/

Answer 1

为了使这项工作在负载上简单地使用filter()来检索选中的单选按钮和它上面trigger()的change事件。

另请注意，您可以通过将条件的布尔输出提供给disabled属性并使用val().

$('input:radio[name="officephone"]').change(function() {

  $('input[name="existingnumber"]').prop("disabled", $(this).val() != 'Existing');

}).filter(':checked').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="officephone" value="New" id="officephonenew" />

<label for="officephonenew">New</label><br />

<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked />

<label for="officephoneexisting">Existing</label><br />

<input type="text" name="existingnumber" placeholder="555-555-1234" disabled /><br />

<input type="radio" name="officephone" value="No" id="officephoneno" />

<label for="officephoneno">Not required</label>