Question

我正在制作一个表单，它包含两个元素，即文本框，另一个是2个单选按钮。

我想验证用户填写的文本框并选择一个单选按钮，然后提交按钮将可用。我用textbox keyup验证很好，但我无法检查单选按钮....

这是我的HTML代码：

<script type="application/javascript">
    $(document).ready(function () {
        $('#addbtn').prop('disabled', true);
        $('#addname').keyup(function() {
            if($(this).val() != '' && $('#addstt').is(':checked'))
            {
                $('#addbtn').prop('disabled', false);
            }
            else
            {
                $('#addbtn').prop('disabled', true);
            }
        });
    });
</script>

<form>
                        <div class="form-group">
                            <label for="nametl">Tên thể loại:</label>
                            <input type="text" id="addname" ng-model="addName" class="form-control" name="nametl" placeholder="Nhập tên thể loại">
                        </div>
                        <div class="form-group">
                            <label>Trạng thái:</label>
                            <label class="radio-inline ml-1 mr-3"><input type="radio" ng-model="addstt" value="0" id="addstt" name="stt"><i class="fa fa-times-circle text-danger pl-1"></i></label>
                            <label class="radio-inline"><input type="radio" ng-model="addstt" id="addstt" value="1" name="stt"><i class="fa fa-check-circle text-success pl-1"></i></label>
                        </div>
                        <hr>
                        <div class="form-group text-center">
                            <button type="button" id="addbtn" ng-click="addtheloai()" class="btn btn-sm btn-success text-white mr-2"><i class="fa fa-check-circle"></i> Thêm</button>
                            <button type="reset" class="btn btn-sm btn-warning text-white mr-2"><i class="fa fa-refresh"></i> Reset</button>
                        </div>
                    </form>

Answer 1

使用change()：

$("input[name='stt']:radio").change(validate)

另外，请注意选择器按name（和:radio）匹配元素，而不是ID。您的代码中有 id="addstt"两次，这是无效的HTML（您不应该有重复的ID。

此外，我已将验证逻辑提取到名为validate的函数中，因此您可以在两个更改事件中重复使用它：

$('#addname').keyup(validate);
$("input[name='stt']:radio").change(validate)

完整演示：

＆＃13;

$(document).ready(function() {
  $('#addbtn').prop('disabled', true);
  function validate() {
    if ($('#addname').val() != '' && $("input[name='stt']:radio").is(':checked')) {
      $('#addbtn').prop('disabled', false);
    } else {
      $('#addbtn').prop('disabled', true);
    }
  }
  $('#addname').keyup(validate);
  $("input[name='stt']:radio").change(validate)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label for="nametl">Tên thể loại:</label>
    <input type="text" id="addname" ng-model="addName" class="form-control" name="nametl" placeholder="Nhập tên thể loại">
  </div>
  <div class="form-group">
    <label>Trạng thái:</label>
    <label class="radio-inline ml-1 mr-3"><input type="radio" ng-model="addstt" value="0" id="addstt" name="stt"><i class="fa fa-times-circle text-danger pl-1"></i></label>
    <label class="radio-inline"><input type="radio" ng-model="addstt" id="addstt" value="1" name="stt"><i class="fa fa-check-circle text-success pl-1"></i></label>
  </div>
  <hr>
  <div class="form-group text-center">
    <button type="button" id="addbtn" ng-click="addtheloai()" class="btn btn-sm btn-success text-white mr-2"><i class="fa fa-check-circle"></i> Thêm</button>
    <button type="reset" class="btn btn-sm btn-warning text-white mr-2"><i class="fa fa-refresh"></i> Reset</button>
  </div>
</form>

＆＃13;

验证jquery中的文本框和单选按钮不起作用

1 个答案: