Jquery克隆只有文本没有属性不工作
jquery clone only text not the attributes not working
我正在制作jquery克隆。这里有一个div和三个元素。第一个元素是选择下拉,第二个是文本框,第三个是添加按钮。当用户单击添加按钮时,它完美地克隆了整个div。但是,如果用户从下拉框中选择其他最接近的文本框需要启用,这是工作良好的第一次。如果用户单击添加按钮,则文本框应该处于禁用模式,因为用户没有从下拉字段中选择另一个。
这是我的jquery代码$(document).ready(function() {
$("#btn_add").click(function() {
$("#duplicate").clone(true).insertAfter("#duplicate");
});
$("#txt_select").change(function() {
if ($(this).find("option:selected").val() == "Other") {
$("#sel_ipt").find("#sel_ipt").removeAttr("disabled").val('');
} else {
$("#sel_ipt").attr("disabled", "disabled");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div id="duplicate">
<select id="txt_select">
<option>Select</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Other">Other</option>
</select>
<input type="text" disabled id="sel_ipt" />
<input type="submit" id="btn_add" value="Add" />
</div>
请给我指路
这是我的JSBIN链接
首先,由于要复制,所以不要使用id
,而要使用class
。
我修改了你的函数,并添加了注释,让你明白函数是如何工作的。
$( function(){
$(".btn_add").click(function(){
// clone the first .duplicate
var clone = $(".duplicate:first").clone(true);
// find the text input, change the disabled property and empty the value
clone.find(".sel_ipt").attr("disabled","disabled").val('');
// insert after the last .dublicate
clone.insertAfter(".duplicate:last");
});
$(".txt_select").change(function () {
if ($(this).find("option:selected").val() == "Other") {
// use next to find the next element with class .sel_ipt
$(this).next(".sel_ipt").removeAttr("disabled").val('');
} else {
$(this).next(".sel_ipt").attr("disabled","disabled");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duplicate">
<select class="txt_select">
<option>Select</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Other">Other</option>
</select>
<input type="text" disabled class="sel_ipt" />
<input type="submit" class="btn_add" value="Add" />
</div>
ID在DOM中应该始终是唯一的。现在进行克隆时,有几个#sel_ipt(其中包括其他)是不正确的。如果你打算用这些做一个表单发布,你可能应该跟踪你有多少个输入,并在副本上添加一个数字。如id="sel_ipt_2" name="sel_ipt_2".
$(document).ready(function(){
$(".txt_select").on('change',function () {
// Find the input in the specific row
var input = $(this).parent().find('.sel_ipt');
input.attr("disabled", $(this).val() != "Other").val('');
/*
This is (probably) better for readability
if ($(this).val() == "Other") {
input.attr("disabled", $(this).val() == "Other").val('');
} else {
input.attr("disabled", true).val('');
}*/
});
$("#btn_add").click(function(){
// Get the parent row for cloning
var row = $(this).parent();
// Insert the row after the cloned row
var clonedRow = row.clone(true).insertAfter(row);
// Disable and remove value in the cloned row
clonedRow.find('.sel_ipt').attr('disabled', true).val('');
});
});
这是一个JS-bin链接
相关文章:
- 数据属性仅在切换设备模式下工作
- 更新属性工作不正常Meteor/MongoDB
- 当加载几个js文件时,defer属性应该如何工作
- Jquery scrollTop动画不工作"无法读取属性'top'无风
- JQuery `length`属性工作不正常.为什么?
- 更改无法正常工作的复选框的属性
- .split() 数据属性在应该工作的时候不起作用
- 为什么除了html5输入模式属性之外,这个简单的regex在任何地方都能工作
- 角度指令和属性Don'在控制器内创建和设置时无法工作
- 为不在javascript中工作的动态创建类设置属性
- 可以't使用iframe获取占位符属性以在IE中工作
- 复选框的checked属性的修改不会;工作不正常
- 属性='值'jquery选择没有'我不在IE工作
- 从服务器端将属性绑定到套接字对象;似乎不能正常工作
- Kml层在刷新后工作正常,但给定typeError:无法读取属性getMap.第一次加载时
- .findOne 在 Iron Router Route 的数据属性中工作,但 .find 不能
- 将元素属性与 javascript 折叠方法结合使用时,引导折叠无法正常工作
- 一个小组如何's DefaultButton属性工作
- JS:事件如何?触摸属性工作
- javascript中的length属性工作不正常