如何在勾选复选框时禁用附加输入文本框javascript

Question

我想在为附加文本框选中复选框时禁用文本框。当复选框被选中时，硬编码文本框被禁用。 运行代码片段查看结果或查看下面显示的屏幕截图。

下面是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>

actual outcome

expected outcome

Answer 1

是因为document.getElementById('venueTB')返回第一元素i n与id="venueTB"的DOM。 尝试类添加到所有的复选框，并通过调用

document.querySelectorAll('.class-name') 

---

另一件事让他们在checkBox()功能，我认为它应该是：

var checkDisabled = checkElement.disabled == true; 

代替：

var checkDisabled = checkElement.disabled = true; 

Answer 2

这些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>