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

标签 javascript jquery html

我有一个名为“CUSTOM”的单选按钮。单击此单选按钮后，我希望它旁边的 2 个文本框从“只读更改为可编辑”，然后将“yyyy/mm/dd”的日期格式显示在文本框中。我正在尝试实现此目的通过调用函数 eb_tb &.Upn 单击“CUSTOM”以外的任何其他单选按钮，我希望文本框能够清除并变为只读，这是我尝试使用 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>

最佳答案

点击其他 radio 时，您必须取消选中#radio1这里尝试这个片段 在函数 dib_tb()

中添加了 document.getElementById('radio_1').checked = false; 

<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>

关于javascript - 单击/取消单击单选按钮时启用/禁用文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32452448/

上一篇：javascript - Onsen UI - Google map 仅在事件选项卡中工作

下一篇：javascript - 如何在 iframe 中维护 Angular 应用程序的页面重新加载路线？

相关文章：

Javascript DOM 文档从标签源 createElement

javascript - (之后)jQuery获取脚本成功，我看不到(故意)错误

javascript - 基本的 jQuery 淡入、淡出问题

python - WebElement 上的 Selenium WebDriver "find_element_by_xpath"

javascript - 动态创建的元素失去间距

javascript - 如何使用 Z-index 设置 div 并修复 css

javascript - 自耕农 : angular-fullstack-generator cannot find module 'babel-runtime/helpers/interop-require-default'

javascript - 两个 JS 库之间的代码冲突

javascript - jQuery 鼠标滚轮水平

javascript - 使用 Javascript 将文本居中并使用 css3 viewport 调整大小在调整大小时会很不稳定

©2024 IT工具网  联系我们