如何在勾选复选框时禁用附加输入文本框javascript
我想在为附加文本框选中复选框时禁用文本框。当复选框被选中时,硬编码文本框被禁用。 运行代码片段查看结果或查看下面显示的屏幕截图。如何在勾选复选框时禁用附加输入文本框javascript
下面是main.js和main.html中文件
<!--main.js-->
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox()"> <label for="venueChk' + counter + '" >No Venue</label> </div>';
document.getElementById('newProg').appendChild(objNewDiv);
}
function removeProg() {
if (0 < counter) {
document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter));
counter--;
} else {
alert("No boxes to remove");
}
}
function checkBox() {
var checkElement = document.getElementById('venueTB');
var checkDisabled = checkElement.disabled = true;
if (checkElement != null && checkDisabled) {
checkElement.value = "-NO VENUE-";
}
}
<!--main.html-->
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<p>OR</p>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input id="venueTB" type="text" value="" placeholder="Venue" />
</div>
</div>
<div class="2u 12u$(medium)">
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()">
<label for="venueChk">No Venue</label>
</div>
</div>
<div id="newProg"></div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()">
<div style="font-size: 35px">+</div>
</a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()">
<div style="font-size: 35px">-</div>
</a>
</div>
</div>
是因为document.getElementById('venueTB')
返回第一元素i n与id="venueTB"
的DOM。 尝试类添加到所有的复选框,并通过调用
document.querySelectorAll('.class-name')
另一件事让他们在checkBox()
功能,我认为它应该是:
var checkDisabled = checkElement.disabled == true;
代替:
var checkDisabled = checkElement.disabled = true;
这些ID必须是唯一的。因为你有内联JS的功能,你可以改变从:
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()">
要:
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)">
通过这种方式,你会经过:
- 事件对象
- 这样的:当前DOM对象
这样你的函数可以是:
function checkBox(e, obj) {
var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0];
var checkDisabled = checkElement.disabled = true;
if (checkElement != null && checkDisabled) {
checkElement.value = "-NO VENUE-";
}
}
的片段:
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox(event, this)"> <label for="venueChk' + counter + '" >No Venue</label> </div>';
document.getElementById('newProg').appendChild(objNewDiv);
}
function removeProg() {
if (0 < counter) {
document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter));
counter--;
} else {
alert("No boxes to remove");
}
}
function checkBox(e, obj) {
var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0];
if (obj.checked) {
checkElement.disabled = true;
checkElement.value = '-NO VENUE-';
} else {
checkElement.disabled = false;
checkElement.value = '';
}
}
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<p>OR</p>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input id="venueTB" type="text" value="" placeholder="Venue" />
</div>
</div>
<div class="2u 12u$(medium)">
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)">
<label for="venueChk">No Venue</label>
</div>
</div>
<div id="newProg"></div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()">
<div style="font-size: 35px">+</div>
</a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()">
<div style="font-size: 35px">-</div>
</a>
</div>
</div>
当复选框未选中时,如何启用输入文本框呢? – user7146946
将您的var checkDisabled和if语句更改为: if(obj.checked){ \t checkElement.disabled = true; checkElement.value =' - NO VENUE-';其他{ } \t checkElement.disabled = false; checkElement.value =''; } –
您就可以在添加类复选框的例子吗? – user7146946
–