如何仅选择一个下拉列表并禁用与单选按钮有关的所有其他下拉列表

普拉迪姆·古普塔

有一门课程,每门课程都在特定的日期范围内进行。

现在,如果我选择课程 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>

谢谢你。

sauhardnc

我创建了一个可根据您的需要工作的代码段,并在必要时在评论中进行了解释。希望对你有帮助。

$(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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在一个下拉列表中选择一个值时如何添加禁用其他下拉列表

从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

如何使用jQuery使用提交按钮启用/禁用从列表中的多个下拉列表中仅选择一个下拉列表?

根据其他下拉列表的选择填充一个下拉列表

从下拉列表中选择一个元素从其他下拉列表中删除JQuery

循环遍历 AntDesign 行/表单;当从下拉列表中选择一个选项时,所有其他行值都会更改

如何仅使一个下拉列表在点击时被下拉?

如何一次仅检查一个单选按钮(其他按钮禁用)

下拉列表显示所有元素但禁用选择

在JSP中,如何选择一个下拉列表值发出GET请求,并如何从数据库中获取其他下拉列表的数据?

一旦用户在颤动的下拉列表中选择了一个项目,如何禁用下拉列表

如何禁用选项列表,直到以反应形式选择另一个下拉列表

如何创建一个Javacript函数来读取下拉列表以显示单选按钮?

选择一个后,如何取消选择数组中的所有其他按钮?

Selenium Webdriver:在“输入”下拉列表中列出所有元素,然后选择其他元素

是否有一个事件与数据列表<option>的选择有关?

在选择其他 -MVC 时填充一个下拉列表

在下拉列表上单击,关闭所有其他下拉列表

Excel下拉列表仅将所有选项显示为一行,并用一个逗号分隔的选项

Excel-使用一个下拉列表填充其他下拉列表

如何根据上一个下拉值的选择启用/禁用第二个下拉列表值

基于其他下拉列表的下拉选择

如何为Yii下拉列表选择一个选项,然后将其禁用?

有什么方法可以将单选按钮列表动态更改为选择下拉列表?

如何获取选中的单选按钮以及如何仅控制列表视图中选择的一个单选按钮

选择单选按钮后的下拉列表

如何在从下拉列表中选择值时刷新所有下拉列表

如何根据另一个下拉列表 ASP.NET 的选择填充下拉列表

如何在单击另一个按钮时更改多个下拉列表的下拉按钮