单击/取消单击单选按钮时启用/禁用文本框

时间：2015-09-08 08:08:10

标签： javascript jquery html

我有一个名为＆＃34; CUSTOM＆＃34;的单选按钮。单击此单选按钮后，我希望其旁边的2个文本框从＆＃34; readonly更改为editable＆amp;那么＆＃34; yyyy / mm / dd＆＃34;的日期格式显示在文本框内。我试图通过调用函数eb_tb＆amp;来实现这一点。向上点击＆＃34; CUSTOM＆＃34;以外的任何其他单选按钮，我希望文本框能够清除＆amp; go readlyly我试图用dib_tb函数。不幸的是，这些似乎都不起作用。

thisFile.php指的是当前代码所在的文件名。我引用同一个文件来加载页面加载时隐藏的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 &nbsp &nbsp => &nbsp &nbsp START DATE </INPUT>
                          &nbsp &nbsp<textarea class="text_box" id="custom_date_range_id_1" readonly> </textarea> &nbsp &nbsp END DATE
                          &nbsp &nbsp<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 个答案:

答案 0 :(得分：2)

点击其他无线电，您必须取消选中#radio1此处尝试此片段 在函数document.getElementById('radio_1').checked = false;

中添加了dib_tb()

＆＃13;
＆＃13; 
<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>
                              &nbsp &nbsp<textarea class="text_box" id="cdr1" readonly> </textarea> END
                              &nbsp &nbsp<textarea class="text_box" id="cdr2" readonly> </textarea>
                          </td>
                      </tr>
                    </table>
                  </form>
             </div>
          </div>
          <div id="resultblock"> </div>
       </body>
    <html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

编写如下代码：

search

答案 2 :(得分：0)

以下是我设法解决这个问题的不同方法。

解决方案 - 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，我通常会在其中添加一个像.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 &nbsp &nbsp => &nbsp &nbsp START DATE </INPUT>
                              &nbsp &nbsp<textarea class="text_box" id="custom_date_range_id_1" readonly> </textarea> &nbsp &nbsp END DATE
                              &nbsp &nbsp<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');
                });

希望这可以帮助其他人处于和我一样的状况。

相关问题
最新问题