我有一个表格供用户添加图书，他们也可以附加链接到使用jquery销售这本书的在线商店，因为我无法确定该人将添加多少，他们可以从他们自己的输入中添加一个在线零售商或者他们可以从数据库中找到的现有零售商中选择，逐行完成，问题是
每次添加新行时，它都来自克隆。
如果此人在文本字段中添加了在线零售商而不是选择预先存在的商店，则应禁用选择字段，或者如果他们选择了现有零售商，则应禁用文本字段。这适用于第一行，但也影响其他行。
我只希望这种禁用机制逐行工作
即。如果我在第一行选择零售商，该行上的零售商文本字段应该禁用，但如果我在第2行上没有选择零售商，则第1行的零售商文本字段不应该启用
// Prepare vars for fields
var title = $('#title');
var description = $('#description');
var reseller_name = $('.reseller-name');
var reseller_select = $('.reseller-select');
var availability_select = $('.availability');
var url = $('.reseller-url');
// Text field to add title with book upload
$(title).keyup(function () {
// Pattern title field must match to be valid
var title_pattern = /^[a-zA-Z0-9\"\':?!&]{4,200}$/;
// Text field for Book Title
if ($(this).val() != '') {
if (!$(this).val().match(title_pattern)) {
// Refer to the proceeding span
$(this).next().html('Title must consist of a minimum of 4-200 max alphabetical, numbered or the following characters \' " : ? ! &');
// User is inserting but so far is not invalid
} else {
$(this).next().html('');
}
} else {
$(this).next().html('');
}
});
// ----------------------------------------------------------------------------------------------------------------- //
// Text field to add description with book upload
$(description).keyup(function () {
// Pattern description field must match to be valid
var desc_pattern = /^[a-zA-Z0-9\"\':?!&]{10,1500}$/;
// Text field for Book Description
if ($(this).val() != '') {
if (!$(this).val().match(desc_pattern)) {
// Refer to the proceeding span
$(this).next().html('Description must consist of a minimum 10-1500 max alphabetical, numbered or the following characters \' " : ? ! &');
// User is inserting but so far is not invalid
} else {
$(this).next().html('');
}
} else {
$(this).next().html('');
}
});
// ----------------------------------------------------------------------------------------------------------------- //
// Text field to add reseller
$(reseller_name).keyup(function () {
// Pattern reseller name must match to be valid
var alpha_numeric = /^[a-zA-Z0-9]+$/;
// Each reseller_name field/index
$('.reseller-name').each(function (i, reseller_name) {
// Text field for Reseller Name
if ($(this).val() != '') {
// Disable reseller select if user is going to give a new reseller
$(reseller_select).prop("disabled", true);
if ($(this).val().length > 130 || !$(this).val().match(alpha_numeric)) {
// Refer to the proceeding span
$(this).next().html('Reseller name must consist of 130 characters or less, containing only letters or numbers');
} else {
$(this).next().html('');
}
// If field is empty
} else {
$(this).next().html('');
$(reseller_select).prop("disabled", false);
}
});
});
// ----------------------------------------------------------------------------------------------------------------- //
// Check if user has selected any value from reseller-select other than none to avoid conflict between reseller name/select
$(reseller_select).change(function () {
// Each reseller_select field/index
$('.reseller-select').each(function (i, reseller_select) {
// Disable reseller name field if anything has been chosen which is determained by the default value of none
if ($(this).val() != 'None') {
$(reseller_name).prop("disabled", true)
// Else none is selected
} else {
$(reseller_name).prop("disabled", false)
}
});
});
// ----------------------------------------------------------------------------------------------------------------- //
// When submit button is clicked
$('#submit_btn').click(function () {
var formIsValid = true;
// Find and loop through evey span tag and see if it has text inside of it
$('#book-form span').each(function () {
if ($(this).html() != '') {
formIsValid = false;
}
});
// If form is valid then make sure there are values (prevents blank form submission)
if (formIsValid) {
$('#book-form :input').each(function () {
if ($(this).val() == '') {
formIsValid = false;
}
});
}
return formIsValid;
});
// Get existing fields/only need to be checked, not duplicated
var title_field = document.getElementById("title"); // Field that will contain book title
var description_field = document.getElementById("description"); // Field that will contain description
// Select allowing user to choose wheither book is currently available
var availability_select = $("<select></select>")
.addClass("availability");
// Button to add more resellers will only get added if javascript is working
var add_reseller_btn = $(".add-reseller-btn")
.on("click", function (e) {
create_row();
});
// Button to submit form
var submit_btn = $("#submit_btn")
.on("click", function (e) {
e.preventDefault();
});
// Function append new row
function create_row() {
var div = $(".reseller-row").last().clone(true)
// Find field in object and set field's value to empty
.find('.reseller-name').val("").end()
.find('.reseller-url').val("").end();
console.log($(div));
// Without .last(), div gets insert after EVERY div matching class name
$(div).insertAfter($(".reseller-row").last());
}// Form holds everything in relation to uploading books #book-form {
// Div hold image preview/button allowing user to upload image with book #book-image-preview {
float: left;
background-color: grey;
position: relative;
// Stretch div so book-image-preview remains centered width: 100%;
text-align: center;
/* On tablet and up text fields for adding a new book need to float next to book-image-preview
so book-image-preview can't take up 100% of screem width */
@include breakpoint(tablet) {
width: 8.750rem;
}
img {
width: 8.750rem;
height: 10.625rem;
display: inline-block;
}
// Absolute position file upload button over image input[type="file"] {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
height: 1.5rem;
}
}
// Container holds fields for text data about book // On mobile this will have to drop below book-image-preview due to size constraints #book-fields-container {
float: left;
clear: both;
@include box-sizing(border-box);
padding: .2rem;
background-color: yellow;
width: 100%;
// On tablet and up there is enough space for div containing text fields to sit next to book-image-preview @include breakpoint(tablet) {
clear: none;
width: 82.9%;
}
// Reseller-row holding fields for adding/selecting book resellers .reseller-row {
float: left;
clear: none;
width: 100%;
/* Divs within reseller row need to sit beside each other, the particular fields are part of process
rather than separate fields with loose relation to each other */
/* Mobile hiwever they'll have to drop due to the limited screen space */
div {
float: left;
clear: both;
// Height 100% of .reseller-row height: 100%;
@include breakpoint(tablet) {
clear: none;
}
// First field within reseller-row - reseller name > input[type="text"] {
/* On mobile fields can't really be shrinked because their already squished for space as it is
but on tablet, reseller name field needs to be shrinked so other fields can sit next to it */
@include breakpoint(tablet) {
width: 10rem;
}
}
// Select field containing existing resellers > select {
@include breakpoint(tablet) {
width: 10rem;
}
}
// Url field for user to add url with book > input[type="url"] {
@include breakpoint(tablet) {
width: 18rem;
}
}
// Button to add another reseller row > button {
width: 2.5rem;
// On tablet and up push button down so it is inline with fields @include breakpoint(tablet) {
margin-top: 1.2rem;
}
}
}
}
}
}<!-- Form for user to add books -->
<form action="/nathan/ip_kate_blogger/www/index.php?page=admin_panel&userID=5" id="book-form" method="post" enctype="multipart/form-data">
<!-- Div holds form fields -->
<div id="book-fields-container">
<!-- Add or find retailer name -->
<div class="reseller-row">
<div>
<label for="reseller_name">Add a retailer</label>
<input type="text" name="reseller_name" class="reseller-name"></input>
<!-- Span if user enters invalid retailer name --> <span></span>
</div>
<div>
<!-- Or select retailers already in database -->
<label for="reseller_select">Existing retailers</label>
<select name="reseller_select" class="reseller-select">
<option name="reseller" value="None">None</option>
<!-- Fill select with resellers -->
<!-- If select has been submitted and its value equals what came back(saved) from post -->
<option name="reseller" value="3">Amazon</option>
<!-- If select has been submitted and its value equals what came back(saved) from post -->
<option name="reseller" value="4">whitcolls</option>
<!-- If select has been submitted and its value equals what came back(saved) from post -->
<option name="reseller" value="5">Yahoo</option>
</select> <span></span>
</div>
<div>
<!-- Url of retailer -->
<label for="reseller_url">Url</label>
<!-- Use html 5 url input type -->
<input type="url" name="reseller_url" class="reseller-url" value=""></input> <span></span>
</div>
<div>
<button class="add-reseller-btn" type="button">Add Reseller</button>
</div>
</div>
<div>
<!-- Span to display image errors --> <span></span>
<input type="submit" name="submit_new_book" id="submit_btn" value="Add Book"></input>
</div>
</div>
</form>
尝试添加新闻行，返回并更改选项。规则是如果零售商选择等于无，则不应禁用通过输入输入零售商名称的文本字段，但如果任何一个包含值，则应禁用相反的字段（仅在该行上）
答案 0 :(得分：2)
检查此解决方案：http://jsfiddle.net/66hjjp40/2/
更改：
function create_row() $('.reseller-select').change $('.reseller-name').keyup