如何在勾選複選框時禁用附加輸入文本框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>