複選框並單擊事件處理

我試圖設置文本框爲'只讀'，添加一個類，並在當時檢查複選框時將文本放入文本框中。此外，我還試圖從文本框中刪除「只讀」屬性，添加一個類並刪除文本框中的文本。複選框並單擊事件處理

我

$('#CheckBoxSectionCode').click(function() { 
    if ($(this).is(':checked')) { 
     $('#TextBoxSectionCode').attr('readonly', 'readonly'); 
     $('#TextBoxSectionCode').addClass('disabled'); 
     $('#TextBoxSectionCode').text(document.getElementById('TextBoxSectionName').val); 
     } 
    else { 
     $('#TextBoxSectionCode').attr('readonly', false); 
     $('#TextBoxSectionCode').addClass('abled'); 
     $('#TextBoxSectionCode').text(''); 
    } 
});

此代碼不會爲我工作。

感謝，

菲利普

謝謝大家的答案。

根據你的意見和答案，我已經改變了我的代碼，但它仍然無法正常工作。

$('#CheckBoxSectionCode').click(function() { 
    if ($(this).is(':checked')) { 
     $('#TextBoxSectionCode').prop('readonly', true); 
     $('#TextBoxSectionCode').addClass('disabled'); 
     $('#TextBoxSectionCode').text('disabled'); 

    } 
    else { 
     $('#TextBoxSectionCode').prop('readonly', false); 
     $('#TextBoxSectionCode').removeClass('disabled').addClass('enabled'); 
     $('#TextBoxSectionCode').text(''); 
    } 
});

我使用的是Chrome瀏覽器來運行該代碼，並使用鍍鉻開發工具，把一個破發點，在上面的代碼，看看發生了什麼事在jQuery的。但是，當我單擊複選框來檢查/取消選中時，那裏沒有任何反應。

來源

2015-04-06 PHG

只是爲了澄清;當@SterlingArcher說*緩存* jQuery對象時，她/他的意思是做類似'var obj = $（'＃TextBoxSectionCode'）'然後使用如下變量調用函數：'obj.attr（...）; obj.addClass（...）'。每次你做'$（something）'時，你都會在jQuery中調用一個尋找DOM的函數。 –

@ArchyWilhes是的，非常好的解釋，謝謝 –

@SterlingArcher沒問題。我認爲你的評論非常可靠。你應該把它變成一個答案:) –

document.getElementById('TextBoxSectionName').val這是錯誤的。你真的應該緩存你的jQuery對象，所以它不會一遍又一遍地瀏覽DOM。然後你混合使用原生JS，而.val不是一個DOM屬性或方法，也不是一個jQuery屬性，對於DOM對象應該是.value，對於jQuery對象應該是.val()。

強制性的解釋由@Archy Wilhes：

「只是爲了澄清;當@SterlingArcher說緩存jQuery對象，她/他的意思做這樣的事情VAR OBJ = $（ '＃TextBoxSectionCode'）然後使用這樣的變量調用函數： obj.attr（...）; obj.addClass（...）。每當你做一個$（東西）你正在調用一個函數在jQuery中尋找DOM「。

來源

2015-04-06 19:44:59

非常好的解釋。我自己的補充，只是因爲嘗試混合使用JQuery和本機JS聽起來並沒有什麼毒性：「document.getElementById」將返回實際的「HTMLElement」。 '$（「＃idIsHere」）'會返回一個JQuery對象;它基本上是一個包含任何數字但通常是一個HTMLElement的數組。它還擁有100億個輔助函數來執行其內部每個HTMLElement的各種操作。您可以使用'jqObj [0]'檢索本地元素，並且可以使用'$（myHtmlElementVar）'（在調用中不包含引號）創建一個JQuery對象。 – Katana314

因爲每次你添加類時元素最終都會有兩個類。考慮在添加一個類之前刪除其他類。例如，

$(selector).removeClass('disabled').addClass('enabled')

來源

2015-04-06 19:46:52

與變化事件，而不是嘗試點擊：

$('#CheckBoxSectionCode').change(function() { 
     if ($(this).is(':checked')) { 
     $('#TextBoxSectionCode').attr('readonly', 'readonly'); 
     $('#TextBoxSectionCode').addClass('disabled'); 
     $('#TextBoxSectionCode').text(document.getElementById('TextBoxSectionName').val); 
    } 
    else { 
     $('#TextBoxSectionCode').attr('readonly', false); 
     $('#TextBoxSectionCode').addClass('abled'); 
     $('#TextBoxSectionCode').text(''); 
    } 

});

來源

2015-04-06 19:54:12 pregoli

對不起，但我已經嘗試'改變'... – PHG

你可以做下面的方式。

//Cache reference to DOM as DOM scan is expensive! 
var textBox = $('#TextBoxSectionCode'); 
$('#CheckBoxSectionCode').click(function() { 
    //Use prop as opposed to attr 
    textBox.prop("readOnly", false).removeClass('disabled').addClass('abled').text(""); 
    if ($(this).is(':checked')) { 
     textBox.prop("readOnly", true).removeClass('abled').addClass('disabled').text($("#TextBoxSectionName").val()); 
    } 
});

來源

2015-04-06 19:55:18 lshettyl

複選框並單擊事件處理

回答

相關問題