基于单选按钮解决jquery启用/禁用文本框的问题 [英] Trouble shooting jquery enable/disable text box based on radiobutton
问题描述
有许多关于如何使用jquery基于单选按钮选择来启用文本字段的文章。来源：禁用/启用单选按钮（jQuery）的文本字段
我没有使用javascript的经验，我无法获得任何这些示例的工作。
我尝试了jfiddle提供的多个示例，但它们不适用于我的应用程序。
所以，一个清单：
1）javascript的工作原理一般，因为我复制并粘贴了一个工作得很好的日期选择器小部件。
2）我有我的标签包装代码片段
3）无论是在正文中还是在头文件中都没有区别。
以下是我使用
的示例代码在视图中（这是codeigniter）
< script src =// code.jquery.com/jquery-1.9.1.js\">
//如果单选按钮被选中，则启用一个方框
$ b $（'input [name =radioknof]'）。on（'click'，function（）{$ b $ （'disabled'，false）.siblings（'input [type = text]'）。prop（'disabled'，true）;
}）;
< / script>
< input type =radioname =radioknofvalue =text1/>
< input type =textid =id1disabled =disabled/>< br />< br />
< input type =radioname =radioknofvalue =text2/>
< input type =textid =id2disabled =disabled/>
很显然，我错过了像语法错误这样简单的事情......但我无法为生活我看到它。我不明白的是为什么jfiddle可以100％工作，而在我的本地服务器上却不能。
（不管单选按钮选项，这两个框都被禁用）
解决了这个问题....正如我所提到的，我没有任何经验，所以我回到了jfiddle示例，查看了底层代码，发现了多余的行 $ （window）.load（function（）{，结尾}）; 。
完整代码如下。
< html>
< body>
< script type ='text / javascript'src ='// code.jquery.com/jquery-1.9.1.js'> < /脚本>
< script type ='text / javascript'>
$（window）.load（function（）{
$（'input [type = text]'）。prop（'disabled'，true）;
$（'input [name （'click'，function（）
{
$（this）.next（）。prop（'disabled'，true）.siblings（'input [type = text ]'）。prop（'disabled'，false）;
}
）;
}）;
< / script>
< input type =radioname =radioknofvalue =text1/>
< input type =textid =id1disabled =true/>< br />< br />
< input type =radioname =radioknofvalue =text2/>
< input type =textid =id2/>
< / body>
There are a number of posts on how to enable a text field based on a radio button selection using jquery. Source:Disable/enable text field with radio button (jQuery)
I've zero experience with javascript, and I cannot get any of these examples to work.
I've tried multiple examples provided via jfiddle, but they don't work on my app.
So, a checklist: 1) javascript works in general, because I have copy&pasted a date picker widget which works just fine. 2) I've got my tags wrapping the snippets of code 3) Whether it's in the body or the header makes no difference.
Here's the example code I'm using In a view (this is codeigniter)
<script src="//code.jquery.com/jquery-1.9.1.js">
//enable a box if the radio button is selected
$('input[name="radioknof"]').on('click', function() {
$(this).next().prop('disabled',false).siblings('input[type=text]').prop('disabled',true);
});
</script>
<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"/>
Obviously I'm missing something as simple as a syntax error... but I cannot for the life of me see it. What I don't understand is why jfiddle works 100%, and on my local server it doesn't.
(The boxes are both disabled regardless of the radio button selection)
Worked it out.... as I mentioned I have zero experience, so I just went back to the jfiddle example and looked at the underlying code and found the extra lines $(window).load(function(){ with the closing });at the end.
Complete code below.
<html>
<body>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'> </script>
<script type='text/javascript'>
$(window).load(function(){
$('input[type=text]').prop('disabled',true);
$('input[name=radioknof]').on('click', function()
{
$(this).next().prop('disabled',true).siblings('input[type=text]').prop('disabled',false);
}
);
});
</script>
<input type="radio" name="radioknof" value="text1" />
<input type="text" id="id1" disabled="true"/><br/><br/>
<input type="radio" name="radioknof" value="text2"/>
<input type="text" id="id2"/>
</body>
这篇关于基于单选按钮解决jquery启用/禁用文本框的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
