Question

我有点困惑我的代码的一部分用于我正在进行的一个小方案项目，我正在尝试在输入上输入数据输入并选择选项并将其保存到变量以供图像/患者使用给出的字段（任何下拉选项和性别选项等）并将其保存到变量或稍后使用的东西。

该系统用于输入患者数据，其中包含与此相对应的图像（女性患者，男性患者和未知患者），患者受伤的类型，并将用户输入的数据存储在下拉菜单中＃39;如下：

一旦用户写完了数据，按下AP按钮就会取出相应的照片，具体取决于所选择的性别，并且床被显示为被占用，这与所有床上用品一致。

如果所选图像为空白（空床），我需要找到一种方法来禁用上面显示的数据输入选项。

（链接到jsfiddle在下面的评论中）

Answer 1

试试这个，我发表评论以便于理解

var imgProp = {
  'padding': '3px',
  'backgroundColor': '#666699',
  'borderSize': '1ps',
  'borderStyle': 'solid',
  'borderColor': '#000000'
};

// check selected and hide or show selectiondata
function checkSelected() {
  var allimgs = document.getElementById('multibeds').getElementsByTagName('img');
  var nrallimgs = allimgs.length;
  var selected = false
  for(i=0; i<nrallimgs; i++) {
    if (allimgs[i].getAttribute('class') == 'selected') {
      selected = true
    }
  }
  var selectiondata = document.getElementById('selectiondata');
  if (!selected) {
    selectiondata.style.display = 'none'
  } else {
    selectiondata.style.display = 'block'
  }
}

function highlightImg() {
  var allimgs = document.getElementById('multibeds').getElementsByTagName('img');
  var nrallimgs = allimgs.length;
  for(i=0; i<nrallimgs; i++) {
    allimgs[i].onclick=function() {
      if(this.style.borderStyle == imgProp.borderStyle) {
        this.style.padding = 'auto';
        this.style.background = 'none';
        this.style.border = 'none';
        this.setAttribute('class', ''); // remove class for notice selected
      }
      else {
        this.style.padding = imgProp.padding;
        this.style.backgroundColor = imgProp.backgroundColor;
        this.style.borderSize = imgProp.borderSize;
        this.style.borderStyle = imgProp.borderStyle;
        this.style.borderColor = imgProp.borderColor;
        this.setAttribute('class', 'selected'); //add class for notice selected
      }
      checkSelected()
    }
  }
}	
highlightImg();
checkSelected();

h1 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
}
tr, td {
  padding: 10px;
}

<body bgcolor="#E6E6FA">
    <h1 style="text-align:center;color:white">NHS Ward Bed Booking System</h1>
    <p style="text-align:center;color:black">Click on one of the beds to select and fill in the value to place a patient/edit a patient.</p>
    <div id="multibeds">
        <table align="center">
            <tr>
                <td><img id="BedLEmpty1" src="BedLEmpty.png" alt="Bed 1" width="100" height="75" border="1" onclick="" title="Patient Bed 1" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty3" src="BedLEmpty.png" alt="Bed 3" width="100" height="75" border="1" onclick="" title="Patient Bed 3" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty5" src="BedLEmpty.png" alt="Bed 5" width="100" height="75" border="1" onclick="" title="Patient Bed 5" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty7" src="BedLEmpty.png" alt="Bed 7" width="100" height="75" border="1" onclick="" title="Patient Bed 7" /></td>
            </tr>
            <td>
                <td><img id="BedLEmpty2" src="BedREmpty.png" alt="Bed 1" width="100" height="75" border="1" onclick="" title="Patient Bed 1" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty4" src="BedREmpty.png" alt="Bed 3" width="100" height="75" border="1" onclick="" title="Patient Bed 3" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty6" src="BedREmpty.png" alt="Bed 5" width="100" height="75" border="1" onclick="" title="Patient Bed 5" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty8" src="BedREmpty.png" alt="Bed 7" width="100" height="75" border="1" onclick="" title="Patient Bed 7" /></td>
            </td>
        </table>
    </div>
    <div id="selectiondata" align="center">
        <input id="btnAdmit" type="button" value="Admit patient" style="color:red" bgcolor="#00e6e6" onclick="btnAdmit_onClick()" />
        <input id="btnDischarge" type="button" value="Discharge patient" style="color:red" bgcolor="#00e6e6" onclick="btnDischarge_onClick()" />
        <select id="btnSelect">
            <option id="LocUnknown" value="Unknown">Unknown</option>
            <option id="LocHead" value="Head">Head</option>
            <option id="LocRightArm" value="Right Arm">Right Arm</option>
            <option id="LocLeftArm" value="LeftArm">Left Arm</option>
            <option id="LocChest" value="Chest">Chest</option>
            <option id="LocAbdo" value="Abdomen">Abdomen</option>
            <option id="LocLeftLeg" value="LeftLeg">Left Leg</option>
            <option id="LocRightLeg" value="RightLeg">Right Leg</option>
        </select>
        <select id="btnGender">
            <option id="GenUnknown" value="Unknown">Unknown</option>
            <option id="GenMale" value="Male">Male</option>
            <option id="GenFemale" value="Female">Female</option>
        </select>
        <br />
        <input id="txtForename" type="text" value="Forename" />
        <input id="txtLastname" type="text" value="Firstname" />
    </div>

使用JS禁用控件

1 个答案: