字段启用禁用javascript不起作用
Posted
技术标签:
【中文标题】字段启用禁用javascript不起作用【英文标题】：field enable disable javascript not working 【发布时间】：2017-06-12 10:20:22 【问题描述】：我有两个单选按钮，我想根据用户在单选按钮中选择的值在我的 html 页面上显示一些值。
我的 html 文件：
<form action="">
<input type="radio" name="calenders" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calenders" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" >
content of B2C
</div>
<div id="calendar_details_b2b">
content of B2B
</div>
这是运行良好的 JS 小提琴：https://jsfiddle.net/0b0xp5xm/9/
现在当我更改 ID 时，它不起作用，https://jsfiddle.net/vjLnou8h/1/
编辑
我已在我的 rails 应用程序 _form.html.erb 中添加了这段代码，我将在 new.hrml.erb 页面上进行渲染。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$('input[type=radio][name=calenders]').change(function ()
$('#calendar_details_b2b').css("display","none");
$('#calendar_details_b2c').css("display","none");
console.log($(this).val());
var fieldToShow = $(this).val();
$("#" + fieldToShow).css("display","block");
);
);
</script>
但是还是不行。
【问题讨论】：
由于未添加 jquery 引用而出现错误。 您需要解释“仍然无法正常工作”的实际含义。你有错误吗？你检查过控制台吗？ 当我单击任何单选按钮时，隐藏的部分不会出现...忽略 console.log($(this).val());行 【参考方案1】：添加 JQuery 引用后，它就可以正常工作了。
https://jsfiddle.net/vjLnou8h/2/
<html>
<head>
<style>
#data_Analysis,
#study_Design
display: none;
</style>
</head>
<body>
<form action="">
<input type="radio" name="calenders" value="study_Design">B2B
<br>
<input type="radio" name="calenders" value="data_Analysis">B2C
</form>
<div id="study_Design">content of B2B</div>
<div id="data_Analysis" >content of B2C</div>
<!-- It's generally better to put your scripts just before the <body> tag closes
because by the time the browser gets that far, the DOM has been read. Also,
it can speed up page load times. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('input[type=radio][name=calenders]').change(function ()
$('#study_Design').css("display","none");
$('#data_Analysis').css("display","none");
console.log($(this).val());
var fieldToShow = $(this).val();
$("#" + fieldToShow).css("display","block");
);
</script>
</body>
</html>【讨论】：
所以我需要在 没有。那是行不通的。您需要在您的 ` 标记集之前添加：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>（或您从中获取 JQuery 的任何路径）。 （仅供参考，请确保您引用了您计划使用的正确版本的 JQuery - 有关详细信息，请参阅：code.jquery.com。
像这样--
是的，但您可以省略 type=text/javascript - 这不再需要。
@MohammadShahbaz 您的原始问题已得到解答。如果您需要，请对提供的答案进行投票并发布一个新问题，因为我的答案说明了您的代码无法正常工作的原因。以上是关于字段启用禁用javascript不起作用的主要内容，如果未能解决你的问题，请参考以下文章