有一门课程,每门课程都在特定的日期范围内进行。
现在,如果我选择课程 1,当我点击提交按钮时,只有课程 1 的日期应该通过,并且所有其他课程日期都应该被禁用。
HTML代码
<ul class='table_course_list'>
<li class="inside_course_list"> <!-- For Checkbox -->
<label class="checkboxContainer" for="course_1">
<input type="radio" id="course_1" name=course_name value="00011">
<span class='checkmark'>course_1 </span>
</label>
<select id="course_date" class="box" name="course_date">
<!-- <option selected>Choose ....</option> -->
<option selected=selected disabled>PLease select objects</option>
<option value="1">Jan. 7, 2020 - Aug. 6, 2020</option>
<option value="2">May 13, 2020 - May 16, 2020</option>
<option value="3">June 1, 2020 - June 13, 2020</option>
</select>
</li>
<li class="inside_course_list"> <!-- For Checkbox -->
<label class="checkboxContainer" for="course_2">
<input type="radio" id="course_2" name=course_name value="000022">
<span class='checkmark'>course_2 </span>
</label>
<select id="course_date" class="box" name="course_date">
<!-- <option selected>Choose ....</option> -->
<option selected=selected disabled>PLease select objects</option>
<option value="4">July 1, 2020 - July 15, 2020</option>
<option value="5">July 17, 2020 - July 31, 2020</option>
<option value="6">July 26, 2020 - Sept. 11, 2020</option>
</select>
</li>
</ul>
谢谢你。
我创建了一个可根据您的需要工作的代码段,并在必要时在评论中进行了解释。希望对你有帮助。
$(function() {
$('[name="course_name"]').on('change', function() { // whenever user changes his selection fire an event
$select = $('[name="course_date"]'); // select element
$select.attr('disabled', true); // make all select disabled(if previously one of them wasn't)
$(this).parent().siblings('[name="course_date"]').attr('disabled', false); // make the closest one active -- here I've first chose parent({label}) and then its sibling({[name="course_date"]})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class='table_course_list'>
<li class="inside_course_list">
<!-- For Checkbox -->
<label class="checkboxContainer" for="course_1">
<input type="radio" id="course_1" name=course_name value="00011"><span class='checkmark'>course_1 </span>
</label>
<!-- Make the select disabled by default, so the user has to select radio button first -->
<select id="course_date" class="box" name="course_date" disabled>
<!-- <option selected>Choose ....</option> -->
<option selected=selected disabled>PLease select objects</option>
<option value="1">Jan. 7, 2020 - Aug. 6, 2020</option>
<option value="2">May 13, 2020 - May 16, 2020</option>
<option value="3">June 1, 2020 - June 13, 2020</option>
</select>
</li>
<li class="inside_course_list">
<!-- For Checkbox -->
<label class="checkboxContainer" for="course_2">
<input type="radio" id="course_2" name=course_name value="000022"><span class='checkmark'>course_2 </span>
</label>
<!-- Make the select disabled by default, so the user has to select radio button first -->
<select id="course_date" class="box" name="course_date" disabled>
<!-- <option selected>Choose ....</option> -->
<option selected=selected disabled>PLease select objects</option>
<option value="4">July 1, 2020 - July 15, 2020</option>
<option value="5">July 17, 2020 - July 31, 2020</option>
<option value="6">July 26, 2020 - Sept. 11, 2020</option>
</select>
</li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句