2016-06-13 160 views
0

我想設置一個範圍選項選擇,如果用戶選擇Abslote然後可以選擇日期(開始日期和結束日期) 否則如果用戶選擇Quice可以選擇選擇列表(「15min」,「1小時」... )如何檢查複選框時顯示覆選框設置?

下面我的代碼,

<script> 
change(element,elementtobechanged) 
{ 
    if(document.getElementsByName(element)[0].checked) 
{  
    document.getElementsByName(elementtobechanged)[0].disabled = true; 
    } 
} 
</script> 

<input type="checkbox" name="absolute" onchange="change(this,'s1');" 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 = '';}" disabled/> 
     <p style="margin-top: 2em">End date:</p> 
     <input id="end" style="width: 100%;" value="" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}" disabled/> 
    </div> 
    </div> 
    <input type="checkbox" name="quick" onchange="change(this,'s2');"        Quick 
    <div id="s2" > 
    <select name="quickselect" id="quickselect" disabled> 
    <option value="15">Last 15 minutes</option> 
    <option value="12h">Last 12 hour</option> 
    <option value="24h">Last 24 hour</option> 
    </select> 

任何人都知道該怎麼辦呢? 任何幫助表示讚賞!

回答

0

老兄我添加了代碼,看看它從複選框禁用複選框。

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

嗨shankar,我修改了代碼,如你所說,但仍然無法禁用其他複選框 –