javascript - 使用 JS 禁用控件

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 5 年前。

Improve this question

我对我正在做的一个小元素的部分代码有点困惑，我正在尝试在我的输入中输入数据并选择选项，然后使用字段将其保存到图像/患者的变量中给定(任何下拉选项和性别选项等)并将其保存到变量或稍后使用的东西。

该系统用于输入带有对应图像的患者数据(女性患者、男性患者和未知患者)、患者所受伤害的类型，并将用户输入的数据存储在下拉菜单的如下:

一旦用户写入数据，按下 AP 按钮，根据选择的性别获取相应的照片，并显示床被占用，这与所有床上用品一起使用。

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

(指向 jsfiddle 的链接在下面的评论中)

最佳答案

试试这个，我给个注释方便理解

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>

关于javascript - 使用 JS 禁用控件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47145289/

上一篇：html - 在 HAML/HTML 中对齐表的列

下一篇：css - 如何用css画一个 “Snip diagonal corner rectangle”？

相关文章：

.net - 更改表单不透明度而不更改容器控件的不透明度

javascript - 使用 JavaScript 划分输入字段

php - Javascript 和 jQuery 转义引号

javascript - 在 JavaScript 中将 Buffer 转换为整数

html - 你如何防止 float 元素的 parent 崩溃？

css - -webkit-transition-timing-function 在 Chrome 中没有任何效果

html - 移动设备上的背景图像与 PC 浏览器中的移动预览不同

c# - 分析内部 .NET Framework 方法所花费的时间

javascript - 在不卡住 GUI 的情况下呈现 plotly.js 图形(Web Worker？)

.net - 好奇于mscorlib引用