如何從複選框onclick或onchange調用函數

我有一個表單，我想要通過選擇複選框來禁用或隱藏兩個輸入字段。我可以很容易地做到這一點當document.ready，但因爲我附加這些領域的功能不生效。我如何使用onClick調用函數？如何從複選框onclick或onchange調用函數

這是我工作的代碼

$(function() { 
 
    $(checkbox).click(function() { 
 
    if ($('#checkbox').is(':checked')) { 
 
     $('#appTimes').find('input').attr('disabled', true); 
 
    } else { 
 
     $('#appTimes').find('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="appTimes" id="appTimes"> 
 
    <input name="stopTime1" type="text" id="stopTime1" /> 
 
    <input name="stopTime12" type="text" id="stopTime12" /> 
 
</div> 
 
<input name="checkbox" type="checkbox" id="checkbox" />

而這正是我試圖做的事：

function boxDisable(e) { 
 
    $(this).click(function() { 
 
    if ($(this).is(':checked')) { 
 
     $(e).find('input').attr('disabled', true); 
 
    } else { 
 
     $(e).find('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
}

<div class="appTimes" id="appTimes"> 
 
    <input name="stopTime1" type="text" id="stopTime1" /> 
 
    <input name="stopTime12" type="text" id="stopTime12" /> 
 
</div> 
 
<input name="checkbox" onclick="boxdisable(appTimes);" type="checkbox" id="checkbox" />

---編輯--------------- 讓我重新定義：我的代碼正在使用。附加創建多個上述代碼的實例。由於附加量是無限的，我無法定義複選框$('#id')，因爲可能有數百個像$('#id1'),$('#id2') ..等我需要一個函數，避免提及確切的元素ID的，被稱爲onClick由複選框並影響前額div，即也追加。

來源

2015-02-06 Ra Tre

我對你試圖在這裏做什麼很困惑，該變種'沒有定義appTimes' ......也許你的意思是'的onclick =「boxdisable（」。appTimes 「）;「'？ – 2015-02-06 18:37:37

不需要if/else，你使用prop來設置和取消設置disabled，而不是attr/removeAttr，它需要一個布爾型的$（e）.find（'input'）。prop（'disabled'，$ something.is '：檢查'））; ' – Popnoodles 2015-02-06 19:22:21

@Popnoodles謝謝 – 2015-02-06 19:31:14

它的工作原理:)

function boxDisable(e, t) { 
 
    if (t.is(':checked')) { 
 
     $(e).find('input').attr('disabled', true); 
 
    } else { 
 
     $(e).find('input').removeAttr('disabled'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="appTimes" id="appTimes"> 
 
    <input name="stopTime1" type="text" id="stopTime1" /> 
 
    <input name="stopTime12" type="text" id="stopTime12" /> 
 
</div> 
 
<input name="checkbox" onclick="boxDisable(appTimes, $(this));" type="checkbox" id="checkbox" />

來源

2015-02-06 18:42:47

是的，但我**補充**這意味着不能使用$（'輸入＃chekcbox'），我需要使用$（this） – 2015-02-06 18:45:43

現在查看我的答案，我已經編輯它。 – 2015-02-06 18:50:44

這個工程！我不知道我可以通過onclick調用來放置$（this）'。謝謝 – 2015-02-06 18:57:23

請勿使用onclick屬性。你的代碼正在做的是在用戶點擊後附加一個新的onclick處理程序。這可能不是你想要的。

您還應該使用prop而不是attr來更改disabled。

由於您要將事件附加到的元素可能不存在於文檔準備就緒上，請將其附加到您確定將在那裏的最近的祖先。

$(function() { // wait for document ready 
    $('#parent-div').on('click', ':checkbox', function(e) { // attach click event 
     $('#appTimes').find(':text').prop('disabled', $(e.currentTarget).is(':checked')); // set disabled prop equal to checked property of checkbox 
    }); 
});

來源

2015-02-06 18:37:51 error

真的好點。但是這並不能解決他的邏輯問題。 – DontVoteMeDown 2015-02-06 18:38:59

@DontVoteMeDown什麼是「邏輯問題」？ – undefined 2015-02-06 18:42:51

夠公平的，我爲此增加了一個段落。 – error 2015-02-06 18:43:21

如果在文檔準備的時間不存在的元素，使用.on，就像這樣：

$(document).ready(function(){ 
    $(document).on('change', 'input[type="checkbox"]', function(e){ 
     //do your stuff here 
    }); 

});

jQuery .on documentation

來源

2015-02-06 18:43:15 Ted

你如何定義複選框，因爲我追加，我有可能追加多個，他們都將具有相同的功能。我需要一個函數來完成這項工作，並使用$（this）來定義複選框 – 2015-02-06 18:47:47

$（e.target）應該爲您提供已更改並激發事件的複選框。此代碼將偵聽器放置在文檔上，因此在準備好文檔後添加到文檔中的任何複選框仍然會導致事件冒泡並激發您的代碼。 – Ted 2015-02-06 18:49:48

你確實明白，在** doc準備好後.append（）發生**，對吧？ – 2015-02-06 18:59:18

$(function() { 
 
    $(checkbox).click(function() { 
 
    if ($('#checkbox').is(':checked')) { 
 
     $('#appTimes').find('input').attr('disabled', true); 
 
    } else { 
 
     $('#appTimes').find('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="appTimes" id="appTimes"> 
 
    <input name="stopTime1" type="text" id="stopTime1" /> 
 
    <input name="stopTime12" type="text" id="stopTime12" /> 
 
</div> 
 
<input name="checkbox" type="checkbox" id="checkbox" />

來源

2017-01-05 10:08:48

如何從複選框onclick或onchange調用函數

回答

相關問題