使用单选按钮禁用/启用文本字段 (jQuery)答案

【问题标题】：Disable/enable text field with radio button (jQuery)使用单选按钮禁用/启用文本字段 (jQuery)
【发布时间】：2012-10-25 06:46:02
【问题描述】：

感谢过去的帮助。我又问你了。

我想要 2 个单选按钮，它们将更改文本输入的状态（启用/禁用）。

我设法让它从禁用变为启用，但问题是，当您在单选按钮之间切换时，文本字段仍保持启用。我不希望那样。

html 在小提琴

$(document).ready( function(){
$('#casodhoda,#casodhoda1').prop('disabled',true);
$('input[type=radio][name=radioknof1]').click( function(){
$('#casodhoda,#casodhoda1').prop('disabled',true).val('');
$(this).next('span').children('wpcf7-form-control-wrap casodhoda').prop('disabled',false).triggerHandler('focus');
});
});

编辑，修改了一些代码，并且无论如何都无法获得工作解决方案。我希望在加载时禁用输入字段，并且当用户单击收音机时，它应该启用两者并专注于第一个输入字段. http://jsfiddle.net/wLFKD/3/ 在这里。谢谢！

【问题讨论】：

你的小提琴和你问的完全不一样。

标签： jquery onclick switch-statement textfield radio

【解决方案1】：

根据您的网站 html 完全更改。这应该有效：

$(document).ready( function(){
  $('#casodhoda,#casprihoda').prop('disabled',true);
  $('input[type=radio][name=radioknof]').click( function(){
    $('#casodhoda,#casprihoda').prop('disabled',true).val('');
    $(this).next('span').children('.wpcf7-form-control').prop('disabled',false).triggerHandler('focus');
  });
});

有一个错字。如果这不起作用，我能想到的唯一其他方法是……不，我认为这会起作用。

【讨论】：

谢谢！它有效，我不能投票给你的答案。另一个可行的解决方案是jsfiddle.net/VV9Fu/2
嘿，你能再帮我一次吗.. 我无法让它在我的网站上工作 (transferji.org).. 我也试过这个小提琴 (jsfiddle.net/wJYjH)..如果你能检查一下，我会感激不尽。我正在使用 WP 插件 Contact Form 7，这可能有问题吗？
我这样做了，并将 .prop 更改为 .attr - 但是现在我的所有字段都被禁用了，当我点击那个收音机时.. aaaa 我整天都在用这个敲打我的头.. 你呢请问还有什么好办法吗？
不..我还需要改变什么吗？收音机需要哪些属性（id、名称、值——还有什么？）..我把这段代码放在之间？
嗯，这应该可以。我不知道为什么不是。这是一个 jsbin，其中包含从您的网站获取的确切 html。它在这里工作：jsbin.com/ukabir/2/edit ...我不知道还能做什么。我猜需要更好（更聪明）的人

【解决方案2】：

这个标记：

<input type="radio" name="radioknof" value="text1"/>
<input type="text" id="id1" disabled="disabled"/><br/><br/>
<input type="radio" name="radioknof" value="text2"/>  
<input type="text" id="id2" disabled="disabled"/>

还有这个脚本：

$('input[name="radioknof"]').on('click', function(){            
    $(this).next().prop('disabled',false).siblings('input[type=text]').prop('disabled',true);
});

得到你想要的结果：http://jsfiddle.net/uefAK/

【讨论】：

Hmm.. 我无法让它工作，因为我使用 WP 插件 Contact Form 7，并且我不能将 disabled="disabled" 赋予输入字段。有什么解决办法吗？
您可以在脚本中使用 $('#id1,#id2').prop('disabled', true); 或 $('input[type=text]').prop('disabled', true); 或等效项（如 Abhilash 的回答）手动禁用它们
这样下去..但是你的切换脚本不起作用..我不知道出了什么问题..
是的，我现在有 3 个在 JS fiddle 工作。但是这个该死的联系表 7.. 但我需要它，因为 DB。也许这不起作用，因为类和名称自动分配给文本框。你能检查一下吗 (transferji.org) - 谢谢
实际页面的DOM结构有点不同。这个小提琴的脚本应该更好用：jsfiddle.net/wJYjH

【解决方案3】：

为什么不呢，另一个不需要 Javascript 的解决方案？

// HTML
<form>
    <div>
        <input id="trigger-1" type="radio" name="radioknof" value="text1"/>
        <label for="trigger-1"><input type="text" id="input-1" /></label>
    </div>
    <div>
        <input id="trigger-2" type="radio" name="radioknof" value="text2"/>
        <label for="trigger-2"><input type="text" id="input-2" /></label>
    </div>
</form>


// CSS, but just for styling, it doesn't have functional meaning :)
form {padding: 2%}
div {margin: 1em 0}
input[type='radio'] {cursor: pointer;}

http://jsfiddle.net/nUWcF/

【讨论】：