复选框并单击事件处理

我试图设置文本框为'只读'，添加一个类，并在当时检查复选框时将文本放入文本框中。此外，我还试图从文本框中删除“只读”属性，添加一个类并删除文本框中的文本。复选框并单击事件处理

我

$('#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

复选框并单击事件处理

回答

相关问题