Question

我在禁用DIV标记中的<select>时遇到了一些问题。

这是一个日历脚本，我用它来禁用一些<div>，我用它来选择时间，在选择日期之后。

我在某些日期禁用了时间选择，但已禁用的div元素保持启用状态。

这是代码。

<script type="text/javascript">

var startDate;
var endDate;
var ONEDAY = 3600 * 24;

function resetDates() {
startDate = endDate = null;
}

function filterDates1(cal) {
startDate = cal.date.getTime();
/* If they haven't chosen an 
end date before we'll set it to the same date as the start date This
way if the user scrolls in the start date 5 months forward, they don't
need to do it again for the end date.
*/

if (endDate == null) { 
    var day29 = document.getElementById("sel1").value;
    var day30 = document.getElementById("sel1").value;
    var day31 = document.getElementById("sel1").value;
    var day32 = document.getElementById("sel1").value;
    var day33 = document.getElementById("sel1").value;
    var day34 = document.getElementById("sel1").value;
    var day35 = document.getElementById("sel1").value;
        if(day29 == "29/12/2011")
        {
            document.getElementById("hours").className = "show";
            document.getElementById("hours1").className = "hide";

            document.getElementById("hours3").className = "hide";
            document.getElementById("hours4").className = "hide";
        }
        else if(day30 == "30/12/2011")
        {
            document.getElementById("hours").className = "show";
            document.getElementById("hours1").className = "hide";
            document.getElementById("hours3").className = "hide";
            document.getElementById("hours4").className = "hide";
        }
        else if(day31 == "31/12/2011")
        {
            document.getElementById("hours").className = "show";
            document.getElementById("hours1").className = "hide";
            document.getElementById("hours3").className = "hide";
            document.getElementById("hours4").className = "hide";
        }
        else if(day32 == "01/01/2012")
        {
            document.getElementById("hours").className = "show";
            document.getElementById("hours1").className = "hide";
            document.getElementById("hours3").className = "hide";
            document.getElementById("hours4").className = "hide";
        }
                                    else if(day33 == "02/01/2012")
        {
            document.getElementById("hours").className = "hide";
            document.getElementById("hours1").className = "hide";
            document.getElementById("hours3").className = "show";
            document.getElementById("hours4").className = "hide";
        }
                                    else if(day34 == "03/01/2012")
        {
            document.getElementById("hours").className = "hide";
            document.getElementById("hours1").className = "hide";
            document.getElementById("hours3").className = "show";
            document.getElementById("hours4").className = "hide";
        }
                                    else if(day35 == "04/01/2012")
        {
            document.getElementById("hours").className = "hide";
            document.getElementById("hours1").className = "hide";
            document.getElementById("hours3").className = "show";
            document.getElementById("hours4").className = "hide";
        }

        else
        {
            document.getElementById("hours1").className = "show";
            document.getElementById("hours").className = "hide";
            document.getElementById("hours3").className = "hide";
            document.getElementById("hours4").className = "hide";
        }

}
endDate = date.getTime();
}


/*
* This functions return true to disallow a date
* and false to allow it.
*/



/* 
* Can't choose days before today or before the
* end date
*/
function disallowDateBefore(date) {
date = date.getTime();
if ((startDate != null) && (date < (startDate - ONEDAY))) {
//start date can't be prior to end date
return true; 
} 
var now = new Date().getTime();
if (date < (now - ONEDAY)) {
//start date can't be prior to today
return true;
}

return false;
}

/* 
* Can't choose days before today or before the
* start date
*/
function disallowDateAfter(date) {
date = date.getTime();
if ((endDate != null) && (date > (endDate - ONEDAY))) {
//end date can't be before start date
return true;
} 

var now = new Date().getTime();
if (date < (now - ONEDAY)) {
//end date can't be prior to today
return true;
}
return false;
}

// end hiding contents from old browsers  -->



var cal = new Zapatec.Calendar.setup({

inputField     :    "sel1",   // id of the input field
button         :    "button1",  // What will trigger the popup of the calendar
ifFormat       :    "%d/%m/%Y",       //  of the input field: Mar 18, 2005
showsTime      :     false,          //no time
dateStatusFunc    :    disallowDateAfter, //the function to call
onUpdate       :    filterDates1

}); 

//]]></script>




<style>
.hide
{
    display: none; visibility:hidden;
}
.show
{
    display: block;
}
</style>

但是在这段代码中，我怎么能完全禁用NOT ACTIVE divs？

谢谢!!!

Answer 1

找到隐藏的div，并遍历他们的孩子并禁用它们。

以下函数允许您指定div的父级（可以是document或某些包含form或div），具有特定className的元素的tagName和标志说是否启用或禁用他们的孩子：

function disableOrEnableChildren(rootElement, tagName, className, disable) {
   var els = rootElement.getElementsByTagName(tagName),
       i, j,
       r = new RegExp("(^| )" + className + "( |$)"),
       c;
   for (i = 0; i < els.length; i++)
      if (r.test(els[i].className)) {
         c = els[i].childNodes;
         for (j =0; j < c.length; j++)
            if (typeof c.disabled != "undefined")
                c.disabled = disable;
      }
}

disableOrEnableChildren(document, "div", "hide", true);

disableOrEnableChildren(document, "div", "show", false);

（当然，如果你不那么通用，你可以缩短它。）

注意：与您的问题无关，通过组合某些情况，可以将代码开头的大型if / else if / else if结构简化为更小的结构：

    if(day29 == "29/12/2011" ||
       day30 == "30/12/2011" ||
       day31 == "31/12/2011" ||
       day32 == "01/01/2012")
    {
        document.getElementById("hours").className = "show";
        document.getElementById("hours1").className = "hide";
        document.getElementById("hours3").className = "hide";
        document.getElementById("hours4").className = "hide";
    }
    else if(day33 == "02/01/2012" ||
            day34 == "03/01/2012" ||
            day35 == "04/01/2012")
    {
        document.getElementById("hours").className = "hide";
        document.getElementById("hours1").className = "hide";
        document.getElementById("hours3").className = "show";
        document.getElementById("hours4").className = "hide";
    }
    else
    {
        document.getElementById("hours1").className = "show";
        document.getElementById("hours").className = "hide";
        document.getElementById("hours3").className = "hide";
        document.getElementById("hours4").className = "hide";
    }

如何禁用div </select>中的<select>元素

1 个答案: