关键词推广设置方法_自己在线房屋设计免费_艺考培训_太原百度seo排名软件

页面开关默认为关闭状态，输入框为禁用状态。
当点击开关，打开开关后，输入框禁用状态解除，才可以在输入框内输入。
html结构:

<div class="page_top"><!-- 第一行 --><div class="top_first"><div class="shangwu">上午</div><div class="switch-box"><input onclick="auditedit()" id="switche" class="switches" type="checkbox" /><label></label></div></div><!-- 输入框 --><input type="text" placeholder="输入开始时间" class="import" disabled /><input type="text" placeholder="输入结束时间" class="import" disabled /><input type="text" placeholder="输入号源" class="import" disabled /></div>

css样式：

/* 上午 */
.page_top {width: 80%;height: 180px;margin-left: 10%;margin-top: 20px;
}.top_first {width: 100%;display: flex;height: 40px;justify-content: space-between;}.shangwu {font-size: 20px;color: #ffffff;
}/* 复选框 */
.switch-box label {width: 50px;height: 26px;background: #ccc;position: relative;display: inline-block;border-radius: 46px;-webkit-transition: 0.4s;transition: 0.4s;margin-top: 3px;
}.switch-box label:after {content: '';position: absolute;width: 30px;height: 30px;border-radius: 100%;left: 0;top: 10px;z-index: 2;background: #fff;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);-webkit-transition: 0.4s;transition: 0.4s;
}.switch-box input {position: absolute;z-index: 5;width: 60px;height: 26px;opacity: 0;cursor: pointer;
}.switch-box label:after {top: 0;width: 22px;height: 22px;margin: 1px 0;
}.switch-box input:checked+label {background: #eb8597;
}.switch-box input:checked+label:after {left: 24px;
}/* 输入框 */
.import {width: 100%;height: 30px;margin-top: 8px;outline: 0;border: 0;border-radius: 3px;
}.imports {width: 100%;height: 30px;margin-top: 8px;outline: 0;border: 0;border-radius: 3px;
}

js代码：

// 点击开关 输入框可以编辑
function auditedit() {var switche = document.getElementById('switche');var imports = document.querySelectorAll('.import');imports.forEach(function(input) {input.disabled = !switche.checked;});
}

禁用状态：

打开状态：