单击/取消单击单选按钮时启用/禁用文本框
[英]enable/disable textbox on click/unclick of radio button
问题描述
我有一个名为“ CUSTOM”的单选按钮。 单击此单选按钮后，我希望其旁边的2个文本框从“只读”更改为“可编辑的”，然后在文本框内显示“ yyyy / mm / dd”的日期格式。通过调用函数eb_tb＆.n单击“ CUSTOM”以外的任何其他单选按钮，我希望文本框清除并进入只读状态，这是我试图与dib_tb函数一起使用的，但似乎都无法正常工作。
thisFile.php是指当前代码所在的文件名。我是指要加载div的同一文件，该div在页面加载时隐藏。
这是我的代码。 有人可以帮我发现我的错误吗？
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="css/revised.css"-->
<link rel="stylesheet" type="text/css" href="css/dashboard.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function setDivProps() {
$('#resultblock').height(594).css({
cursor: "auto",
backgroundColor: "#A69A74",
// backgroundColor: "#FFFFFF",
marginLeft: "5%",
marginTop: "5%",
width: "88%",
height: "75%",
borderRadius: "25px",
border: "2px solid black",
// background: "url(image/divpic.jpg)"
});
};
function radio_check_enable_custom_date_range_text_box() {
if (document.getElementById('hd_radio_1').checked) {
document.getElementById('custom_date_range_id_1').removeAttribute('readonly');
document.getElementById('custom_date_range_id_2').removeAttribute('readonly');
document.getElementById('custom_date_range_id_1').value = 'yyyy-mm-dd';
document.getElementById('custom_date_range_id_2').value = 'yyyy-mm-dd';
}
}
;
function radio_check_disable_custom_date_range_text_box() {
document.getElementById('hd_radio_1').checked == false;
if (document.getElementById('hd_radio_1').checked === false) {
document.getElementById('custom_date_range_id_1').value = '';
document.getElementById('custom_date_range_id_2').value = '';
document.getElementById('custom_date_range_id_1').setAttribute('readonly', true);
document.getElementById('custom_date_range_id_2').setAttribute('readonly', true);
}
}
;
$(document).ready(function(){
$('#cssmenu li').click(function(){
$("#cssmenu li").removeClass("active");
$(this).addClass("active");
});
$("#page1").click(function(){
setDivProps();
// $(this).css("background-color","black");
$('#resultblock').load('thisFile.php #form_1');
});
$("#page2").click(function(){
setDivProps();
$('#resultblock').load('thisFile.php #form_2');
});
$("#page3").click(function(){
setDivProps();
$('#resultblock').load('thisFile.php #form_3');
});
});
</script>
<title>DEMO</title>
</head>
<body>
<div>
<header class="site-header-wrap">
<div class="site-header">
<h1>MY DEMO</h1>
</div>
</header>
<div id='cssmenu'>
<ul class="uinav">
<li class='active'><a id="home1" href='#' ><span>OPTION-1</span></a></li>
<li><a id="page1" href="#"><span>OPTION-2</span></a></li>
<li><a id="page2" href="#"><span>TOPTION-3</span></a></li>
<li><a id="page3" href="#"><span>OPTION-4</span></a></li>
</ul>
</div>
<div id="div_id_1" style="display: none;">
<form method="post" action="" id='form_1'>
<table id="tbl_format_1">
<tr bgcolor="#8F4A11">
<td colspan="3" id="table_f_1">
<b> TIMELINE </b>
</td>
</tr>
<tr><td></td></tr><tr><td></td></tr><tr><td></td></tr>
<tr>
<td colspan=3>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd1" Name ='bubble1' value= 'week' onclick="radio_check_disable_custom_date_range_text_box()"> WEEK </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd2" Name ='bubble1' value= 'fortnight' onclick="radio_check_disable_custom_date_range_text_box()"> FORTNIGHT </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd3" Name ='bubble1' value= 'month' onclick="radio_check_disable_custom_date_range_text_box()"> MONTH </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd4" Name ='bubble1' value= 'three_month' onclick="radio_check_disable_custom_date_range_text_box()"> 1 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd5" Name ='bubble1' value= 'six_month' onclick="radio_check_disable_custom_date_range_text_box()"> 2 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd6" Name ='bubble1' value= 'nine_month' onclick="radio_check_disable_custom_date_range_text_box()"> 3 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd7" Name ='bubble1' value= 'year' onclick="radio_check_disable_custom_date_range_text_box()"> YEAR </INPUT>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td>
<INPUT TYPE = 'Radio' class="radio_btn" Name ='bubble1' value='custom' id="hd_radio_1" onclick="radio_check_enable_custom_date_range_text_box()"> CUSTOM     =>     START DATE </INPUT>
   <textarea class="text_box" id="custom_date_range_id_1" readonly> </textarea>     END DATE
   <textarea class="text_box" id="custom_date_range_id_2" readonly> </textarea>
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="resultblock"> </div>
</body>
<html>
3 个解决方案
解决方案1
2 2015-09-08 08:15:02
单击其他无线电时，您必须取消选中#radio1在此尝试添加此代码段的document.getElementById('radio_1').checked = false; 在函数dib_tb()
<html> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--link rel="stylesheet" href="css/revised.css"--> <link rel="stylesheet" type="text/css" href="css/myCustom.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> function setDivProps() { $('#resultblock').height(300).css({ cursor: "auto", backgroundColor: "#FFFFFF", marginLeft: "5%", marginTop: "5%", width: "90%", height: "90%", borderRadius: "2px", border: "2px solid black", }); }; function eb_tb() { if (document.getElementById('radio_1').checked === true) { document.getElementById('cdr1').removeAttribute('readonly'); document.getElementById('cdr2').removeAttribute('readonly'); document.getElementById('cdr1').value = 'yyyy-mm-dd'; document.getElementById('cdr2').value = 'yyyy-mm-dd'; } } ; function dib_tb() { document.getElementById('radio_1').checked = false; if (document.getElementById('radio_1').checked === false) { document.getElementById('cdr1').value = ''; document.getElementById('cdr2').value = ''; //document.getElementById('custom_date_range_id').style.display='none'; document.getElementById('cdr1').setAttribute('readonly', true); document.getElementById('cdr2').setAttribute('readonly', true); } } ; $(document).ready(function(){ $('#cssmenu li').click(function(){ $("#cssmenu li").removeClass("active"); $(this).addClass("active"); }); $("#page1").click(function(){ setDivProps(); // $(this).css("background-color","black"); $('#resultblock').load('thisPage.php #form_id_1'); }); }); </script> </head> <body> <div> <header class="site-header-wrap"> <div class="site-header"> <h1>DEMO</h1> </div> </header> <div id='cssStyle'> <ul> <li><a id="page1" href="#"><span>B</span></a></li> </ul> </div> <div style=""> <form method="post" action="" id='form_id_1'> <table > <tr> <td> <b>TIMELINE </b> </td> </tr> <tr> <td colspan=4> <INPUT TYPE = 'Radio' class="radio_btn" id="rd1" Name ='optname1' value= 'opt1' onclick="dib_tb()"> Option-1</INPUT> <INPUT TYPE = 'Radio' class="radio_btn" id="rd2" Name ='optname2' value= 'opt2' onclick="dib_tb()"> Option-2</INPUT> </td> </tr> <tr> <td> <INPUT TYPE = 'Radio' class="radio_btn" Name ='radio_1_class1' value= 'custom' id="radio_1" onclick="eb_tb()"> CUSTOM => START </INPUT>    <textarea class="text_box" id="cdr1" readonly> </textarea> END    <textarea class="text_box" id="cdr2" readonly> </textarea> </td> </tr> </table> </form> </div> </div> <div id="resultblock"> </div> </body> <html>
解决方案2
0 2015-09-08 10:22:47
这样编写代码：
$(document).ready(function() {
$('#cdr1').hide();
$('#cdr1').hide();
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="opt1"){
$('#cdr1').show();
$('#cdr2').hide();
}else if($(this).attr("value")=="opt2"){
$('#cdr2').show();
$('#cdr1').hide();
}
}
解决方案3
0 已采纳 2015-09-09 03:16:02
这是我设法解决此问题的不同方法。
解决方案-1
http://forums.asp.net/t/1600445.aspx?To+Hide+multiple+items+having+same+ID+using+Javascript
function hideAll(ctrlId)
{
var Ctrls = document.all(ctrlId);
for (var i = 0; i<Ctrls.items.length; i++)
{
var Ctrl = Ctrls.items(i);
Ctrl.style.display = "none";
}
}
解决方案-2
隐藏具有指定ID的元素
更新：
好吧，如果您需要隐藏一组div，我通常会在所有div上添加一个类似.element-to-hide的类：
<div id="asd" class="element-to-hide">...
<div id="lol" class="element-to-hide">...
<div id="foo" class="element-to-hide">...
Ant after just a touch of jQuery:
$('.element-to-hide').each(function(){
$(this).hide();
});
解决方案-3
我了解到在同一页面上创建重复ID并不是一个好主意，所以我使用了这种方法。
我没有使用“隐藏的div方法”，而是将隐藏的div的内容移到了新的PHP文件中。 这样，当我通过加载内容时
testhiddenblockconts.php的内容
<div id="div_id_1" style="display: none;">
<form method="post" action="" id='form_1'>
<table id="tbl_format_1">
<tr bgcolor="#8F4A11">
<td colspan="3" id="table_f_1">
<b> TIMELINE </b>
</td>
</tr>
<tr>
<td colspan=3>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd1" Name ='bubble1' value= 'week' onclick="radio_check_disable_custom_date_range_text_box()"> WEEK </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd2" Name ='bubble1' value= 'fortnight' onclick="radio_check_disable_custom_date_range_text_box()"> FORTNIGHT </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd3" Name ='bubble1' value= 'month' onclick="radio_check_disable_custom_date_range_text_box()"> MONTH </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd4" Name ='bubble1' value= 'three_month' onclick="radio_check_disable_custom_date_range_text_box()"> 1 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd5" Name ='bubble1' value= 'six_month' onclick="radio_check_disable_custom_date_range_text_box()"> 2 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd6" Name ='bubble1' value= 'nine_month' onclick="radio_check_disable_custom_date_range_text_box()"> 3 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd7" Name ='bubble1' value= 'year' onclick="radio_check_disable_custom_date_range_text_box()"> YEAR </INPUT>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td>
<INPUT TYPE = 'Radio' class="radio_btn" Name ='bubble1' value='custom' id="hd_radio_1" onclick="radio_check_enable_custom_date_range_text_box()"> CUSTOM     =>     START DATE </INPUT>
   <textarea class="text_box" id="custom_date_range_id_1" readonly> </textarea>     END DATE
   <textarea class="text_box" id="custom_date_range_id_2" readonly> </textarea>
</td>
</tr>
</table>
</form>
</div>
现在，“ thisFile.php”中的代码如下所示
$("#page1").click(function(){
setDivProps();
// $(this).css("background-color","black");
$('#resultblock').load('testhiddenblockconts.php #form_1');
});
希望这能在与我相同的情况下帮助其他人。
单击单选按钮上的内联 JavaScript 启用/禁用选择和文本框
[英]Inline JavaScript enable/disable select and text box on click radio button
javascript enable单击禁用单选按钮，一次仅选择一个
[英]javascript enable disable radio button on click and select only one at a time
在单选按钮组中，如何使其中两个启用一个文本框，而其中一个禁用/只读该文本框
[英]In radio button group, how can I make 2 of them enable a textbox and one of them disable/readonly the textbox
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.