Javascript 如何在填写上一个div之前禁用div
我目前正在做一个拖放式测验，首先我有四个问题，其中的答案可以被挑选出来并放到相应的问题中。我想禁用问题2、3、4的下拉框，直到问题1得到回答。然后重新激活q2，使3、4处于禁用状态，依此类推。。。。我对JavaScript非常陌生，并尝试了多种方法来实现这一点，包括在这里查看与我类似的其他情况，但尚未成功！到目前为止，我已经放了一个小测验的截图，希望能让它更清楚 希望有人能帮忙，谢谢 我的代码如下： HTML:Javascript 如何在填写上一个div之前禁用div,javascript,html,Javascript,Html,我目前正在做一个拖放式测验，首先我有四个问题，其中的答案可以被挑选出来并放到相应的问题中。我想禁用问题2、3、4的下拉框，直到问题1得到回答。然后重新激活q2，使3、4处于禁用状态，依此类推。。。。我对JavaScript非常陌生，并尝试了多种方法来实现这一点，包括在这里查看与我类似的其他情况，但尚未成功！到目前为止，我已经放了一个小测验的截图，希望能让它更清楚 希望有人能帮忙，谢谢 我的代码如下： HTML: SAN故障 你的桑'；的RAID控制器出现故障并损坏了大量数据。从备份映像恢
SAN故障
你的桑'；的RAID控制器出现故障并损坏了大量数据。从备份映像恢复内部服务器时，您需要与灾难恢复提供商联系，以故障切换到您的恢复环境
任务一：损害控制
1.查找受影响硬件的相关IP地址
2.通知您的灾难恢复提供商
3.将情况告知董事团队
4.更新紧急电话信息
0
灾难恢复运行手册
第1页
执行摘要
[ACME Ltd.公司信息]
ACME Ltd.目前有9台虚拟服务器和4台物理服务器，全部托管在现场数据中心。
恢复所需的关键IT人员是[IT经理]、[Backup Manager]和[Disaster recovery Provider]。服务器必须在调用后8小时内恢复。
第2页
目录
调用灾难恢复
关键联系人
呼叫树
紧急电话信息
网络图
恢复位置
软件许可证和注册密钥
事件日志
恢复模板
第3页
调用灾难恢复
如果发生危机或灾难，业务连续性经理必须决定行动方案。如果出于任何原因，业务连续性经理无法履行这些职责，请参考下面的级联决策层次结构。
根据可用性，只有最高级的成员才有权调用灾难恢复计划。
1。业务连续性经理
2。IT总监
3。IT经理
4。IT管理员
如果没有指定的工作人员可用...祝你好运
第4页
关键联系人
联系方式
电话号码
电子邮件地址
总经理
0123456789
MD@acme.com
财务总监
1234567890
FD@acme.com
业务连续性经理
2345678901
公元前D@acme.com
销售经理
3456789012
sM@acme.com
生产经理
4567890123
PM@acme.com
人力资源总监
5678901234
H.R。D@acme.com
后备经理
6789012345
BM@acme.com
电源供应商
7890123456
PS@acme.com
网络供应商
8901234567
我S@acme.com
灾难恢复供应商
9012345678
D.R。S@acme.com
第5页
呼叫树
第6页
紧急电话留言
我们已经向工作人员分发了紧急电话卡，其中包含灾难中紧急电话线的号码。您应该更新此消息，以提醒您的员工发生灾难性事件，并且每次情况发生变化时-；接近或远离分辨率。
更新
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="draganddrop.js"></script>
</head>
<body>
<div id="container">
<h1>SAN Failure</h1>
<p>Your SAN's RAID controller has failed and corrupted a significant amount of data. You need to contact your DR provider failover to your recovery environment whilst you restore your internal servers from backup images.</p>
</div>
<div id="mainContainer">
<div id="dragScriptContainer">
<div id="questionDiv">
<p><strong>Task one: Damage Control</strong></p>
<div class="dragDropSmallBox textbox" id="q1">1. Find the relevant IP address for the affected hardware</div><div class="destinationBox"></div>
<div class="dragDropSmallBox textbox" id="q2">2. Notify your disaster recovery provider</div><div class="destinationBox"></div>
<div class="dragDropSmallBox textbox" id="q3">3. Inform the team of directors of the situation</div><div class="destinationBox"></div>
<div class="dragDropSmallBox textbox disabled="true"" id="q4">4. Update the emergency phone message</div><div class="destinationBox"></div>
</div>
<div class="feedback">
<div id="feedback"></div>
<div id="counter">0</div>
<div id="result"></div>
</div>
<div class="container">
<h1 style="text-align:center">Disaster Recovery Runbook</h1>
<!-- Page 1 -->
<h5 style="color: red; ">Page 1</h5>
<h2>Executive Summary</h2>
<p>[ACME Ltd. company information]<br>ACME Ltd. currently has 9 virtual servers and 4 physical servers all hosted at an onsite data centre.<br>The key IT staff required for recovery are [IT Manager], [Backup Manager] and [Disaster Recovery Provider]. The servers must be recovered within 8 hours of invocation.
</p>
<!-- Page 2 -->
<h5 style="color: red; ">Page 2</h5>
<h2>Contents</h2>
<p><strong>
Invoking Disaster Recovery<br>
Key Contacts<br>
Call Tree<br>
Emergency Phone Message<br>
Network Diagram<br>
Recovery Locations<br>
Software License and Registration Keys<br>
Event Log<br>
Recovery Templates
</strong></p>
<!-- Page 3 -->
<h5 style="color: red; ">Page 3</h5>
<h2>Invoking Disaster Recovery</h2>
<p>If a crisis or disaster has occurred, the business continuity manager must decide the course of action. If, for whatever reason, the business continuity manager is unable to perform these duties, refer to the cascading decision-making hierarchy below.<br>Only the most senior member is authorized to invoke the DR plan, subject to availability.<br>1. Business Continuity Manager<br>2. IT Director<br>3. IT Manager<br>4. IT Administrator<br>In the event none of the stated staff members are available...good luck.</p>
<div id="answerDiv">
<!-- Page 4 -->
<h5 style="color: red; ">Page 4</h5>
<h2>Key Contacts</h2>
<main class="flex-center">
<table>
<tr>
<td><p><strong>Contact</strong></p></td>
<td><p><strong>Telephone Number</strong></p></td>
<td><p><strong>Email Address</strong></p></td>
</tr>
<tr>
<td><p>Managing Director</p></td>
<td><div class="dragDropSmallBox" id="a3">0123456789</div></td>
<td><div class="dragDropSmallBox" id="a10">M.D@acme.com</div></td>
</tr>
<tr>
<td><p>Financial Director</p></td>
<td><div class="dragDropSmallBox" id="a10">1234567890</div></td>
<td><div class="dragDropSmallBox" id="a10">F.D@acme.com</div></td>
</tr>
<tr>
<td><p>Business Continuity Manager</p></td>
<td><div class="dragDropSmallBox" id="a10">2345678901</div></td>
<td><div class="dragDropSmallBox" id="a10">B.C.D@acme.com</div></td>
</tr>
<tr>
<td><p>Sales Manager</p></td>
<td><div class="dragDropSmallBox" id="a10">3456789012</div></td>
<td><div class="dragDropSmallBox" id="a10">S.M@acme.com</div></td>
</tr>
<tr>
<td><p>Production Manager</p></td>
<td><div class="dragDropSmallBox" id="a10">4567890123</div></td>
<td><div class="dragDropSmallBox" id="a10">P.M@acme.com</div></td>
</tr>
<tr>
<td><p>HR Director</p></td>
<td><div class="dragDropSmallBox" id="a10">5678901234</div></td>
<td><div class="dragDropSmallBox" id="a10">H.R.D@acme.com</div></td>
</tr>
<tr>
<td><p>Backup Manger</p></td>
<td><div class="dragDropSmallBox" id="a10">6789012345</div></td>
<td><div class="dragDropSmallBox" id="a10">B.M@acme.com</div></td>
</tr>
<tr>
<td><p>Power Supplier</p></td>
<td><div class="dragDropSmallBox" id="a10">7890123456</div></td>
<td><div class="dragDropSmallBox" id="a10">P.S@acme.com</div></td>
</tr>
<tr>
<td><p>Internet Supplier</p></td>
<td><div class="dragDropSmallBox" id="a10">8901234567</div></td>
<td><div class="dragDropSmallBox" id="a10">I.S@acme.com</div></td>
</tr>
<tr>
<td><p>Disaster Recovery Supplier</p></td>
<td><div class="dragDropSmallBox" id="a2">9012345678</div></td>
<td><div class="dragDropSmallBox" id="a10">D.R.S@acme.com</div></td>
</tr>
</table>
</main>
<!-- Page 5 -->
<h5 style="color: red; ">Page 5</h5>
<h2>Call Tree</h2>
<img class="callTree" src="img/call_tree.jpg">
<!-- Page 6 -->
<h5 style="color: red; ">Page 6</h5>
<h2>Emergency Phone Message</h2>
<p>We have distributed emergency call cards to staff, containing the number for an emergency phone line in a disaster. You should update this message to alert your staff members to the presence of a disastrous event, and every time there is a change in circumstances - either towards or away from resolution.<br> To update the message call the number below:</p>
<div class="dragDropSmallBox" id="a4">UPDATE EMERGENCY PHONE LINE</div><br><br>
<!-- Page 7 -->
<h5 style="color: red; ">Page 7</h5>
<h2>Network Diagram with Service Information</h2>
<main class="flex-center">
<table>
<tr>
<td><p><strong>Service</strong></p></td>
<td><p><strong>IP Address</strong></p></td>
</tr>
<tr>
<td><p>Email</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.1</div></td>
</tr>
<tr>
<td><p>Web Server</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.2</div></td>
</tr>
</tr>
<tr>
<td><p>MPLS</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.3</div></td>
</tr>
<tr>
<td><p>VoIP</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.4</div></td>
</tr>
<tr>
<td><p>SAN Server</p></td>
<td><div class="dragDropSmallBox" id="a1">192.0.0.5</div></td>
</tr>
<tr>
<td><p>CRM Server</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.6</div></td>
</tr>
</table>
</main>
</div>
<div id="dragContent"></div>
</div>
</div>
</div>
<div id="buttons">
<input type="button" onclick="dragDropResetForm();return false" value="Reset">
<input type="button" onclick="clearFields();" id="clear" value="Clear">
<input type="button" onclick="showResults();" id="result" value="Result">
</div>
</body>
</html>
var shuffleQuestions = true;
var shuffleAnswers = false;
var lockedAfterDrag = true;
function quizIsFinished()
{
alert('Finished!');
}
var dragContentDiv = false;
var dragContent = false;
var dragSource = false;
var dragDropTimer = -1;
var destinationObjArray = new Array();
var destination = false;
var dragSourceParent = false;
var dragSourceNextSibling = false;
var answerDiv;
var questionDiv;
var sourceObjectArray = new Array();
var arrayOfEmptyBoxes = new Array();
var arrayOfAnswers = new Array();
function getTopPos(inputObj)
{
if(!inputObj || !inputObj.offsetTop)return 0;
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}
function getLeftPos(inputObj)
{
if(!inputObj || !inputObj.offsetLeft)return 0;
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function cancelEvent()
{
return false;
}
function initDragDrop(e)
{
if(document.all)e = event;
if(lockedAfterDrag && this.parentNode.parentNode.id=='questionDiv')return;
dragContentDiv.style.left = e.clientX + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft) + 'px';
dragContentDiv.style.top = e.clientY + Math.max(document.documentElement.scrollTop,document.body.scrollTop) + 'px';
dragSource = this;
dragSourceParent = this.parentNode;
dragSourceNextSibling = false;
if(this.nextSibling)dragSourceNextSibling = this.nextSibling;
if(!dragSourceNextSibling.tagName)dragSourceNextSibling = dragSourceNextSibling.nextSibling;
dragDropTimer=0;
timeoutBeforeDrag();
return false;
}
function timeoutBeforeDrag(){
if(dragDropTimer>=0 && dragDropTimer<10){
dragDropTimer = dragDropTimer +1;
setTimeout('timeoutBeforeDrag()',10);
return;
}
if(dragDropTimer>=10){
dragContentDiv.style.display='block';
dragContentDiv.innerHTML = '';
dragContentDiv.appendChild(dragSource);
}
}
function dragDropMove(e)
{
if(dragDropTimer<10){
return;
}
if(document.all)e = event;
var scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
dragContentDiv.style.left = e.clientX + scrollLeft + 'px';
dragContentDiv.style.top = e.clientY + scrollTop + 'px';
var dragWidth = dragSource.offsetWidth;
var dragHeight = dragSource.offsetHeight;
var objFound = false;
var mouseX = e.clientX + scrollLeft;
var mouseY = e.clientY + scrollTop;
destination = false;
for(var no=0;no<destinationObjArray.length;no++){
var left = destinationObjArray[no]['left'];
var top = destinationObjArray[no]['top'];
var width = destinationObjArray[no]['width'];
var height = destinationObjArray[no]['height'];
destinationObjArray[no]['obj'].className = 'destinationBox';
var subs = destinationObjArray[no]['obj'].getElementsByTagName('DIV');
if(!objFound && subs.length==0){
if(mouseX < (left/1 + width/1) && (mouseX + dragWidth/1) >left && mouseY < (top/1 + height/1) && (mouseY + dragHeight/1) >top){
destinationObjArray[no]['obj'].className='dragContentOver';
destination = destinationObjArray[no]['obj'];
objFound = true;
}
}
}
sourceObjectArray['obj'].className='';
if(!objFound){
var left = sourceObjectArray['left'];
var top = sourceObjectArray['top'];
var width = sourceObjectArray['width'];
var height = sourceObjectArray['height'];
if(mouseX < (left/1 + width/1) && (mouseX + dragWidth/1) >left && mouseY < (top/1 + height/1) && (mouseY + dragHeight/1) >top){
destination = sourceObjectArray['obj'];
sourceObjectArray['obj'].className='dragContentOver';
}
}
return false;
}
function dragDropEnd()
{
if(dragDropTimer<10){
dragDropTimer = -1;
return;
}
dragContentDiv.style.display='none';
sourceObjectArray['obj'].style.backgroundColor = '#FFF';
if(destination){
destination.appendChild(dragSource);
destination.className='destinationBox';
if(!destination.id || destination.id!='answerDiv'){
var previousEl = dragSource.parentNode.previousSibling;
if(!previousEl.tagName)previousEl = previousEl.previousSibling;
var numericId = previousEl.id.replace(/[^0-9]/g,'');
var numericIdSource = dragSource.id.replace(/[^0-9]/g,'');
if(numericId==numericIdSource){
dragSource.className='correctAnswer';
checkAllAnswers();
}
else
dragSource.className='wrongAnswer';
}
if(destination.id && destination.id=='answerDiv'){
dragSource.className='dragDropSmallBox';
}
} else{
if(dragSourceNextSibling)
dragSourceNextSibling.parentNode.insertBefore(dragSource,dragSourceNextSibling);
else
dragSourceParent.appendChild(dragSource);
}
if(numericId==numericIdSource) {
document.getElementById('feedback').innerHTML = "";
document.getElementById('feedback').innerHTML += 'Correct Answer!';
}
else {
document.getElementById('feedback').innerHTML = "";
document.getElementById('feedback').innerHTML += 'Incorrect Answer! Have you tried this...';
incrementScore();
}
dragDropTimer = -1;
dragSourceNextSibling = false;
dragSourceParent = false;
destination = false;
}
function checkAllAnswers()
{
for(var no=0;no<arrayOfEmptyBoxes.length;no++){
var sub = arrayOfEmptyBoxes[no].getElementsByTagName('DIV');
if(sub.length==0)return;
if(sub[0].className!='correctAnswer'){
return;
}
}
quizIsFinished();
}
function resetPositions()
{
if(dragDropTimer>=10)return;
for(var no=0;no<destinationObjArray.length;no++){
if(destinationObjArray[no]['obj']){
destinationObjArray[no]['left'] = getLeftPos(destinationObjArray[no]['obj'])
destinationObjArray[no]['top'] = getTopPos(destinationObjArray[no]['obj'])
}
}
sourceObjectArray['left'] = getLeftPos(answerDiv);
sourceObjectArray['top'] = getTopPos(answerDiv);
}
function initDragDropScript()
{
dragContentDiv = document.getElementById('dragContent');
answerDiv = document.getElementById('answerDiv');
answerDiv.onselectstart = cancelEvent;
var divs = answerDiv.getElementsByTagName('DIV');
var answers = new Array();
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dragDropSmallBox'){
divs[no].onmousedown = initDragDrop;
answers[answers.length] = divs[no];
arrayOfAnswers[arrayOfAnswers.length] = divs[no];
}
}
if(shuffleAnswers){
for(var no=0;no<(answers.length*10);no++){
var randomIndex = Math.floor(Math.random() * answers.length);
answerDiv.appendChild(answers[randomIndex]);
}
}
sourceObjectArray['obj'] = answerDiv;
sourceObjectArray['left'] = getLeftPos(answerDiv);
sourceObjectArray['top'] = getTopPos(answerDiv);
sourceObjectArray['width'] = answerDiv.offsetWidth;
sourceObjectArray['height'] = answerDiv.offsetHeight;
questionDiv = document.getElementById('questionDiv');
questionDiv.onselectstart = cancelEvent;
var divs = questionDiv.getElementsByTagName('DIV');
var questions = new Array();
var questionsOpenBoxes = new Array();
for(var no=0;no<divs.length;no++){
if(divs[no].className=='destinationBox'){
var index = destinationObjArray.length;
destinationObjArray[index] = new Array();
destinationObjArray[index]['obj'] = divs[no];
destinationObjArray[index]['left'] = getLeftPos(divs[no])
destinationObjArray[index]['top'] = getTopPos(divs[no])
destinationObjArray[index]['width'] = divs[no].offsetWidth;
destinationObjArray[index]['height'] = divs[no].offsetHeight;
questionsOpenBoxes[questionsOpenBoxes.length] = divs[no];
arrayOfEmptyBoxes[arrayOfEmptyBoxes.length] = divs[no];
}
if(divs[no].className=='dragDropSmallBox'){
questions[questions.length] = divs[no];
}
}
if(shuffleQuestions){
for(var no=0;no<(questions.length*10);no++){
var randomIndex = Math.floor(Math.random() * questions.length);
questionDiv.appendChild(questions[randomIndex]);
questionDiv.appendChild(questionsOpenBoxes[randomIndex]);
destinationObjArray[destinationObjArray.length] = destinationObjArray[randomIndex];
destinationObjArray.splice(randomIndex,1);
questionsOpenBoxes[questionsOpenBoxes.length] = questionsOpenBoxes[randomIndex];
questionsOpenBoxes.splice(randomIndex,1);
questions[questions.length] = questions[randomIndex];
questions.splice(randomIndex,1);
}
}
questionDiv.style.visibility = 'visible';
answerDiv.style.visibility = 'visible';
document.documentElement.onmouseup = dragDropEnd;
document.documentElement.onmousemove = dragDropMove;
setTimeout('resetPositions()',150);
window.onresize = resetPositions;
}
function incrementScore(){
counter = document.getElementById('counter');
counter.innerHTML++;
}
function showResults() {
result = document.getElementById('result');
if(counter.innerHTML < 2){
result.innerHTML += 'Well done!';
} else {
result.innerHTML += 'Not so great!';
}
}
/* Reset the form */
function dragDropResetForm()
{
for(var no = 0; no < arrayOfAnswers.length; no++){
arrayOfAnswers[no].className='dragDropSmallBox'
answerDiv.appendChild(arrayOfAnswers[no]);
}
document.getElementById('score').innerHTML = "";
}
function clearFields() {
document.getElementById("questionDiv").innerHTML = "";
}
window.onload = initDragDropScript;
<input id="input1" />
<br />
<input id="input2" />
<br />
<input id="input3" />
<br />
<input id="input4" />
<br />
document.getElementById('input2').disabled = true;
document.getElementById('input3').disabled = true;
document.getElementById('input4').disabled = true;
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
inputs[index].addEventListener('input', function () {
// Input 1
if (this == document.getElementById('input1')) {
if (this.value.length) {
document.getElementById('input2').disabled = false;
} else {
document.getElementById('input2').disabled = true;
document.getElementById('input3').disabled = true;
document.getElementById('input4').disabled = true;
}
}
// Input 2
if (this == document.getElementById('input2')) {
if (this.value.length) {
document.getElementById('input3').disabled = false;
} else {
document.getElementById('input3').disabled = true;
document.getElementById('input4').disabled = true;
}
}
// Input 3
if (this == document.getElementById('input3')) {
if (this.value.length) {
document.getElementById('input4').disabled = false;
} else {
document.getElementById('input4').disabled = true;
}
}
});
}
document.getElementById("myDIV").removeEventListener("mouseup", dragDropEnd)
document.getElementById("myDIV").removeEventListener("mousedown", dragDropMove)