如何仅在选择框和复选框后启用按钮答案

【问题标题】：how to enable button only after select box and checkbox如何仅在选择框和复选框后启用按钮
【发布时间】：2017-04-04 13:40:08
【问题描述】：

我有一个小表单，其中有两个输入框，1 个选择框和 1 个复选框和提交按钮。

我希望在填写所有字段后启用提交。到目前为止，我可以在两个输入框值都填充后启用提交按钮，但我无法启用选择框和复选框。

var Seatname;
var Seatadmissionyr;
var Seatlevelselectval;
var SeatProgramLevel;
//var SeatAvailableFaculties;
$('#SaveNxt').attr('disabled', 'disabled');

$('#contentHoldEdu input').change(function() {
  name = $('#Name').val()
  admissionyr = $('#AdmissionYear').val()
  SeatProgramLevel = $('#courseSelect option:selected').text();
  //SeatAvailableFaculties = $('.eduSelectedCheck').val()

  if ((name.length > 0) && (admissionyr.length > 0) && (course.length > 0)) {
    $('#Save').removeAttr('disabled');
  } else {

    $('#Save').attr('disabled', 'disabled');
  }
})

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<form role="form" id="contentHoldEdu" method="post">
  <div class="setup-content form-horizontal form-bordered" id="step-1">

    <div class="form-group">
      <label class="label1 col-md-4">Enter the name  <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="Name" type="text" name="name" data-required="1" class="form-control" />

      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Enter Admission Year <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="AdmissionYear" type="text" name="name" data-required="1" class="form-control allownumericwithoutdecimal" maxlength="4" />


      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select course <span class="required"> * </span> </label>
      <div class="col-md-7">
        <select id="courseSelect" class="form-control" data-placeholder="Select" tabindex="1">
<option value="0" disabled selected default>--Select--</option>
    																<option value="B.tech">B.tech</option>
    																<option value="mba">Mba</option>
    															</select>
      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select all applicable faculties <span class="required"> * </span> </label>
      <div class="col-md-7">
        <div class="portlet light portlet-fit box grey ">
          <div class="portlet-body">
            <table class="eduleveles table table-bordered table-hover">
              <thead>
                <th>confirm</th>
                <th> AC Room</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input type="checkbox" /></td>
                  <td>Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="Save" type="button">submit</button>
    </div>

【问题讨论】：

课程未定义 - $('#courseSelect')[0].selectedIndex>0 和 $("[type=checkbox]").is(":checked") 怎么样
@mplungjan 你能帮我解决我当前的 jquery 代码的一些工作问题吗？
您的代码的许多其他问题 1. 输入（姓名和入学年份）都具有相同的“姓名”属性。更正否则表单将不会保存值 2. 是否有任何具体原因为什么您将表格放入对齐而不是 div？ 3.为复选框字段分配一个id或类

标签： javascript jquery html css forms

【解决方案1】：

我想对输入文本框执行 onkeyup 函数。否则，如果用户最后填写输入文本框，他将无法直接单击提交按钮。在下面查看我的代码

var Seatname;
var Seatadmissionyr;
var Seatlevelselectval;
var SeatProgramLevel;
//var SeatAvailableFaculties;
$('#SaveNxt').attr('disabled', 'disabled');

function changeDetected(){
  name = $('#Name').val()
  admissionyr = $('#AdmissionYear').val()
  SeatProgramLevel = $('#courseSelect').val();

  if ((name.length > 0) && (admissionyr.length > 0) && (SeatProgramLevel.length > 0) && ($('#confirmRoom').attr('checked') != undefined) && ($('#confirmRoom2').attr('checked') != undefined) && ($('#confirmRoom3').attr('checked') != undefined)) {
    $('#Save').removeAttr('disabled');
  } else {

    $('#Save').attr('disabled', 'disabled');
  }
}

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>


<form role="form" id="contentHoldEdu" method="post">
  <div class="setup-content form-horizontal form-bordered" id="step-1">

    <div class="form-group">
      <label class="label1 col-md-4">Enter the name  <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="Name" type="text" name="name" data-required="1" class="form-control" onkeyup="changeDetected()"/>

      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Enter Admission Year <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="AdmissionYear" type="text" name="name" data-required="1" class="form-control allownumericwithoutdecimal" maxlength="4" onkeyup="changeDetected()" />


      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select course <span class="required"> * </span> </label>
      <div class="col-md-7">
        <select id="courseSelect" class="form-control" data-placeholder="Select" tabindex="1" onchange="changeDetected()">
<option value="">--Select--</option>
    																<option value="B.tech">B.tech</option>
    																<option value="mba">Mba</option>
    															</select>
      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select all applicable faculties <span class="required"> * </span> </label>
      <div class="col-md-7">
        <div class="portlet light portlet-fit box grey ">
          <div class="portlet-body">
            <table class="eduleveles table table-bordered table-hover">
              <thead>
                <th>confirm</th>
                <th> AC Room</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input type="checkbox" id="confirmRoom" onchange="changeDetected()"/></td>
                  <td>Yes</td>
                </tr>
                <tr>
                  <td>
                    <input type="checkbox" id="confirmRoom2" onchange="changeDetected()"/></td>
                  <td>Yes</td>
                </tr>
                <tr>
                  <td>
                    <input type="checkbox" id="confirmRoom3" onchange="changeDetected()"/></td>
                  <td>Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="Save" type="button" disabled="disabled">submit</button>
    </div>

【讨论】：

谢谢，但我有一个疑问，如果我们有两个以上的复选框？
你添加 onchange="changeDetected()" 他们每个人。并且您必须检查它们是否已在 changeDetected 函数中进行检查。
如果你不想继续检查，你可以把所有的输入元素放在一个表单标签里，把需要的属性放在输入标签里。这样您就不需要继续检查您的 changeDetected() 函数。除非已填写所有输入，否则该表格将不允许您继续前进。让我知道你是否想要一个代码 sn-p。
嘿@IhavCoder 我不想在输入标签中使用必需的attr，我只想通过jquery来实现它，因为稍后我会将我的表单转换为动态的所以所有复选框，选择中的选项将来自后端.如果您仅通过 jquery 帮助我，那就太好了（拨弄多个复选框）
我编辑了上面的代码。检查出来....（根据您的需要修改html）

【解决方案2】：

检查是否选中了复选框：https://stackoverflow.com/a/7960219/978649

并检查 select 是否具有您期望的值，就像普通输入文本一样使用：

if($('#courseSelect').val() == '1') { ... }
// or
if($('#courseSelect').val() != '0') { ... }

【讨论】：

【解决方案3】：

您可以使用设计模式“状态机”来处理这种情况，例如这种情况。这是您可以查看该模式的一个简单示例：http://www.dofactory.com/javascript/state-design-pattern

状态模式为有限的一组对象提供特定于状态的逻辑，其中每个对象代表一个特定的状态。

【讨论】：

请不要发布仅链接的答案。目前尚不清楚您的答案为何与问题相关

【解决方案4】：

这应该可行。

var Seatname;
var Seatadmissionyr;
var Seatlevelselectval;
var SeatProgramLevel;
//var SeatAvailableFaculties;
$('#SaveNxt').attr('disabled', 'disabled');

$('#contentHoldEdu input').change(function() {
  name = $('#Name').val()
  admissionyr = $('#AdmissionYear').val()
  SeatProgramLevel = $('#courseSelect option:selected').text();
  checkCtrl =  $("#thisCheck").is(':checked');

  if ((name.length > 0) && (admissionyr.length > 0) && checkCtrl == true && SeatProgramLevel != '--Select--' ) {
    alert('enable' + SeatProgramLevel + checkCtrl );
    $('#Save').prop('disabled','');
  } else {
     alert('disable' +  SeatProgramLevel + checkCtrl );
    $('#Save').prop('disabled', 'disabled');
  }
})

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<form role="form" id="contentHoldEdu" method="post">
  <div class="setup-content form-horizontal form-bordered" id="step-1">

    <div class="form-group">
      <label class="label1 col-md-4">Enter the name  <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="Name" type="text" name="name" data-required="1" class="form-control" />

      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Enter Admission Year <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="AdmissionYear" type="text" name="name" data-required="1" class="form-control allownumericwithoutdecimal" maxlength="4" />


      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select course <span class="required"> * </span> </label>
      <div class="col-md-7">
        <select id="courseSelect" class="form-control" data-placeholder="Select" tabindex="1">
<option value="0" disabled selected default>--Select--</option>
    																<option value="B.tech">B.tech</option>
    																<option value="mba">Mba</option>
    															</select>
      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select all applicable faculties <span class="required"> * </span> </label>
      <div class="col-md-7">
        <div class="portlet light portlet-fit box grey ">
          <div class="portlet-body">
            <table class="eduleveles table table-bordered table-hover">
              <thead>
                <th>confirm</th>
                <th> AC Room</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input id="thisCheck" type="checkbox" /></td>
                  <td>Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="Save" type="button">submit</button>
    </div>

【讨论】：

按钮可点击
抱歉，已修复。

【解决方案5】：

这可以在不修改 HTML 并且只使用一个函数的情况下完成：

function isReady() {
  contentReady = 0;
  $('#contentHoldEdu input, #contentHoldEdu select').each(function () {
    if ($(this).val() && !($(this).val() == "on" && !$(this).is(":checked"))) {
      contentReady++;
    }
  });
  $("#Save").attr("disabled", contentReady != 4)
}

var Seatname;
var Seatadmissionyr;
var Seatlevelselectval;
var SeatProgramLevel;
//var SeatAvailableFaculties;
$('#Save').attr('disabled', true);

$('#contentHoldEdu input, #contentHoldEdu select').on('input',isReady)

function isReady() {
  contentReady = 0;
  $('#contentHoldEdu input, #contentHoldEdu select').each(function () {
    if ($(this).val() && !($(this).val() == "on" && !$(this).is(":checked"))) {
      contentReady++;
    }
  });
  console.log(contentReady);
  $("#Save").attr("disabled", contentReady != 4)
}

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<form role="form" id="contentHoldEdu" method="post">
  <div class="setup-content form-horizontal form-bordered" id="step-1">

    <div class="form-group">
      <label class="label1 col-md-4">Enter the name  <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="Name" type="text" name="name" data-required="1" class="form-control" />

      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Enter Admission Year <span class="required"> * </span> </label>
      <div class="col-md-7">
        <input id="AdmissionYear" type="text" name="name" data-required="1" class="form-control allownumericwithoutdecimal" maxlength="4" />


      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select course <span class="required"> * </span> </label>
      <div class="col-md-7">
        <select id="courseSelect" class="form-control" data-placeholder="Select" tabindex="1">
<option value="" disabled selected default>--Select--</option>
    																<option value="B.tech">B.tech</option>
    																<option value="mba">Mba</option>
    															</select>
      </div>
    </div>
    <div class="form-group">
      <label class="label1 col-md-4">Select all applicable faculties <span class="required"> * </span> </label>
      <div class="col-md-7">
        <div class="portlet light portlet-fit box grey ">
          <div class="portlet-body">
            <table class="eduleveles table table-bordered table-hover">
              <thead>
                <th>confirm</th>
                <th> AC Room</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input type="checkbox" /></td>
                  <td>Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="Save" type="button">submit</button>
    </div>

【讨论】：