如果选中,则禁用表单(多表单)
If checked then disable form (multi form)
我有经验表格,用户可以在那里输入他们的工作经验。因此,表单是多形式的,用户可以在其中添加尽可能多的体验。
例如,用户有两种工作经验,表单的 HTML 将是:
<div class="row">
<%= f.input :start_work, as: :date, start_year: Date.today.year - 20, end_year: Date.today.year, ignore_day: true, order: [:month, :year] %><br>
<%= f.input :is_current, input_html: {class: 'current'} %><br>
<%= f.input :end_work, input_html: {class: 'end_work'} , as: :date, start_year: Date.today.year - 20, end_year: Date.today.year, ignore_day: true, order: [:month, :year] %>
</div>
<div class="row">
<%= f.input :start_work, as: :date, start_year: Date.today.year - 20, end_year: Date.today.year, ignore_day: true, order: [:month, :year] %><br>
<%= f.input :is_current, input_html: {class: 'current'} %><br>
<%= f.input :end_work, input_html: {class: 'end_work'} , as: :date, start_year: Date.today.year - 20, end_year: Date.today.year, ignore_day: true, order: [:month, :year] %>
</div>
因此,有两个元素具有电流类和end_work类。现在,我希望当用户检查is_current时,end_work将被禁用。因此,我添加了这些JS代码:
$(document).ready(function() {
$(".current").each(function() {
$(this).click(function() {
var isCurrent = $(this).prop("checked");
if (isCurrent == true) {
$(".end_work").prop("disabled", "disabled");
}
else {
$(".end_work").prop("disabled", false);
}
});
});
});
它应该像这样工作:如果我检查了第一个is_current,那么第一个end_work字段将被禁用,而不会影响第二个end_work。
但是,当我检查第一个is_current时,它会影响第二个end_work。我无法将每个表单的类更改为不同,因为表单是用茧宝石(嵌套形式)生成的。解决方案是什么?
更新 1
这是我的HTML代码:
<div class="form-group boolean optional resume_experiences_is_current">
<div class="checkbox">
<input value="0" type="hidden" name="resume[experiences_attributes][1][is_current]">
<label class="boolean optional" for="resume_experiences_attributes_1_is_current">
<input class="boolean optional current" type="checkbox" value="1" checked="checked" name="resume[experiences_attributes][1][is_current]" id="resume_experiences_attributes_1_is_current">Is current
</label>
</div>
</div>
<div class="form-group date optional resume_experiences_end_work"><label class="date optional control-label" for="resume_experiences_attributes_1_end_work_2i">End work</label><div class="form-inline"><input type="hidden" id="resume_experiences_attributes_1_end_work_3i" name="resume[experiences_attributes][1][end_work(3i)]" value="1">
<select id="resume_experiences_attributes_1_end_work_2i" name="resume[experiences_attributes][1][end_work(2i)]" class="date optional end_work form-control">
<option value="1">January</option>
<option value="2">February</option>
<option value="3" selected="selected">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="resume_experiences_attributes_1_end_work_1i" name="resume[experiences_attributes][1][end_work(1i)]" class="date optional end_work form-control">
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016" selected="selected">2016</option>
</select>
</div></div>
使用 .next(SELECTOR)
仅选择具有相应checkbox
next
元素
试试这个:
$('.current').on('change', function() {
$(this).next('.end_work').prop('disabled', this.checked);
})
编辑:
$('.current').on('change', function() {
$(this).closest('.form-group').next('.form-group').find('.end_work').prop('disabled', this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-group boolean optional resume_experiences_is_current">
<div class="checkbox">
<input value="0" type="hidden" name="resume[experiences_attributes][1][is_current]">
<label class="boolean optional" for="resume_experiences_attributes_1_is_current">
<input class="boolean optional current" type="checkbox" value="1" checked="checked" name="resume[experiences_attributes][1][is_current]" id="resume_experiences_attributes_1_is_current">Is current
</label>
</div>
</div>
<div class="form-group date optional resume_experiences_end_work">
<label class="date optional control-label" for="resume_experiences_attributes_1_end_work_2i">End work</label>
<div class="form-inline">
<input type="hidden" id="resume_experiences_attributes_1_end_work_3i" name="resume[experiences_attributes][1][end_work(3i)]" value="1">
<select id="resume_experiences_attributes_1_end_work_2i" name="resume[experiences_attributes][1][end_work(2i)]" class="date optional end_work form-control">
<option value="1">January</option>
<option value="2">February</option>
<option value="3" selected="selected">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="resume_experiences_attributes_1_end_work_1i" name="resume[experiences_attributes][1][end_work(1i)]" class="date optional end_work form-control">
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016" selected="selected">2016</option>
</select>
</div>
</div>
在这里摆弄
在 jquery 中尝试 next
函数。在点击事件之后。
$(document).ready(function() {
$(".current").each(function() {
$(this).click(function() {
var isCurrent = $(this).prop("checked");
if (isCurrent == true) {
$(this).next(".end_work").prop("disabled", "disabled");
}
else {
$(this).next(".end_work").prop("disabled", false);
}
});
});
});
相关文章:
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 如果消息框答案为YES,则用Javascript填写表单
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 如果用户没有更改,则表单值为空
- 如果选择单选按钮,则显示表单
- 如果ng单击附加到提交按钮,则表单未验证
- jQuery表单验证(如果==“执行此操作”)仅适用于第一次输入
- 表单提交没有'如果为空,则不会显示错误消息
- 如果表单中的空字段使用Javascript从URL中排除
- 如果从文件输入按钮调用 .ajaxSubmit() 时,它是必需的表单
- 如果选择了多个选项,则使用 jQuery 显示隐藏的表单元素
- 'Alajax' Jquery 简单表单提交.如果表单未经验证,如何防止提交
- 如果字段具有无效值,请禁用表单提交
- 如何登'如果验证未通过,则不提交表单
- 如果文本字段不为空,则自动将表单提交到url
- 表单在每个页面中 - 仅在特定页面上处理它 - 如果当前不在页面上 - 重定向 - 否则 - 使用 AJAX 更新数据
- 如果AngularJS中有可编辑的表行,那么表单元素放在哪里
- 如果选中,则禁用表单
- 捕获点击事件以弹出登录表单(如果用户未登录)
- 提交时打开灯箱.如果灯箱关闭,提交表单.如果链接被点击,不要提交