选中复选框后如何显示复选框设置?

时间:2016-06-13 08:28:22

标签: checkbox

我想设置一个范围选项来选择,如果用户选择了Abslote,那么他可以选择一个日期(开始日期和结束日期), 否则,如果用户选择Quice,那么他可以选择选择列表(“15分钟”,“1小时”......)

我的代码如下,

</script>

任何人都知道怎么做?

感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

Dude我添加了代码,看看它是否从复选框禁用复选框。

 Hey I guess you can disable the checkboxes based on the user input.

    For Example:

    If user select's the quick, then disable the absolute checkbox and the option provided.you can use javascript to disable and enable based onclick.

    Answer:
    You can use the onchange event in javascript and then check both the checkboxes.checked value and then choose the decision of making the deselect the 
    other checkbox.

    change(element,elementtobechanged)
    {
     if(document.getElementsByName(element)[0].checked)
     {     
         document.getElementsByName(elementtobechanged)[0].disabled  = true;
     }
    }
While calling send 'this', and the other element to disabled.
The Code to disable the checkbox is
    <html>

<head>
  <script type = "text/javascript">
    function change(element, elementtobechanged) {
      if (document.getElementsByName(element)[0].checked) {
        document.getElementsByName(elementtobechanged)[0].disabled = true;
      } else {
        document.getElementsByName(elementtobechanged)[0].disabled = false;
      }
    }
  </script>
</head>       
<body>
  <input type="checkbox" name="absolute" onChange="change(this.name,'quick');" Absolute</p>
  <div id="s1">
    <div class="demo-section k-content">
      <p style="margin-top: 2em">Start date:</p>
      <input id="start" style="width: 100%;" value="" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}" />
      <p style="margin-top: 2em">End date:</p>
      <input id="end" style="width: 100%;" value="" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}" />
    </div>
  </div>
  <input type="checkbox" name="quick" onChange="change(this.name,'absolute');" Quick <div id="s2">
  <select name="quickselect" id="quickselect">
    <option value="15">Last 15 minutes</option>
    <option value="12h">Last 12 hour</option>
    <option value="24h">Last 24 hour</option>
  </select>
</body>

</html>