使用另一個功能禁用一個功能 - 香草JS

Question

我想知道我是如何使用另一個功能禁用一個功能的。我有一個表格要求額外的課程作業，但如果用戶沒有完成任何額外工作，則隱藏輸入。如果他們刪除了一組輸入並改變了他們的想法，我想進行失敗保護。

我需要幫助的是編寫故障安全功能，檢查：如果功能1發生，禁用它。

CodePen：http://codepen.io/theodore_steiner/pen/ORzpQQ

function hideCourseWork() { 
 
    var otherEducationHistory = document.getElementById("otherEducationHistory"); 
 
    otherEducationHistory.style.display = "none"; 
 

 
    if (otherEducationHistory.style.display == "none") { 
 
    var noAdditionalCourseWork = document.getElementById("noAdditionalCourseWork"); 
 

 
    var checkNo = document.getElementById("checkNo"); 
 

 
    var undo = document.getElementById("undoNoAdditionalCourseWork"); 
 

 
    noAdditionalCourseWork.style.top = "-48px"; 
 
    checkNo.style.top = "-65px"; 
 
    undo.style.top = "-65px"; 
 
    undo.style.top = "-63px"; 
 
    } 
 

 
};

<div class="input-group" id="other-education"> 
 
    <p class="subtitleDirection">Please list in chronological order, any additional cources beyond the degree(s) listed above, including any Ministry of Education Courses. If you have not completed any additional course work, please indicate.</p> 
 
    <div class="clearFix"></div> 
 
    <label id="otherEducation">Additional Courses*</label> 
 
    <div id="otherEducationHistory"> 
 
    <input type="text" class="three-lines" name="otherUniversity_1" placeholder="Institution" onblur="this.placeholder='Institution'" onfocus="this.placeholder=''" /> 
 
    <input type="text" class="three-lines" name="otherDegree_1" placeholder="Degree/Diploma" onblur="this.placeholder='Degree/Diploma'" /> 
 
    <input type="date" class="three-lines" name="otherEducationYear_1" /> 
 
    <input type="button" value="+" onclick=addOtherEducation() /> 
 
    </div> 
 
    <!--end of otherEducationHistory div--> 
 

 
    <div class="clearFix"></div> 
 
</div> 
 
<!--end of other-education div--> 
 

 
<p id="noAdditionalCourseWork">I have not completed any additional course work.</p> 
 
<input type="radio" name="checkNo" id="checkNo" onclick="hideCourseWork()" /> 
 
<br /> 
 
<p id="undoNoAdditionalCourseWork" onclick="reAddCourseWork()">(Undo).</p>

Answer 1

你不會被你的問題真正清楚，但也許這將幫助。

函數與變量的排序方式相同。它們可以被重新分配，（就像一個空的函數，例如）..

function doSomething(){ 
    alert("didSomething"); 
} 

function disableDoSomething(){ 
    window.doSomething = function(){}; 
} 

如果您希望能夠重新啓用該功能後，你可以做這樣的事情...

function doSomething(){ 
    alert("didSomething"); 
} 

var functionHolder; 
function disableDoSomething(){ 
    if(!functionHolder) functionHolder = window.doSomething; 
    window.doSomething = function(){}; 
} 

function enableDoSomething(){ 
    window.doSomething = functionHolder; 
} 

Answer 2

var foo =() => { /* foo definition */ }, 
    bar = foo; 

/* re-assign foo to a new, empty, function implementation; 
    effectively "disabling" it */ 
foo =() => {}; 

/* ... code that uses function reference foo ...*/ 

/* re-enable foo's original behavior by assigning bar to foo */ 
foo = bar; 

爲後人的緣故（ES5）：

var foo = function() { /* foo definition */ }, 
    bar = foo; 

/* re-assign foo to a new, empty, function implementation; 
    effectively "disabling" it */ 
foo = function(){}; 

/* ... code that uses function reference foo ...*/ 

/* re-enable foo's original behavior by assigning bar to foo */ 
foo = bar;