Jquery如何改变一个文本字段后，它被填充?

我有两个单选按钮，"是"one_answers"否"和一个文本字段。如果用户单击"是"，那么禁用的文本字段将启用并且是必需的。我想文本字段的边界是红色时需要，并创建了一个类来做到这一点。我还创建了一个类，使文本字段成为灰色，以便在填充字段后使用。我的问题是如何正确应用所需的类，然后在文本字段上应用验证过的类。

我下面的解决方案涉及在blur方法中添加一个函数，这似乎是有效的。问题是，如果我决定点击"不"然后再点击"是"，红色边框就不显示了。

关于如何解决这个问题或如何优化我的代码的任何建议将不胜感激。谢谢你！

<input class="form-check-input radio" type="radio" name="radio" id="Yes" value="Yes" />
<label class="radio" for="Yes">Yes</label>
<input class="form-check-input radio" type="radio" name="radio" id="No" value="No" />
<label class="radio" for="No">No</label>
<br />
<label for="required_later">Enable if "Yes"</label>
<input type="text" name="textfield" id="textfield" placeholder="required" disabled>

CSS

.req {
border: 1px solid red;
}
.valid {
border: 1px solid #ced4da;
}

Jquery

$("#Yes").click(function() {
$("#textfield").prop("required", true).addClass("req");
$("#textfield").prop("disabled", false);
$("#textfield").blur(function () {
$("#textfield").addClass("valid");
});
});
$("#No").click(function() {
$("#textfield").prop("required", false).removeClass("req").val("");
$("#textfield").prop("disabled", true);
});

这里是JSFiddle: https://jsfiddle.net/L4529nzx/1/

这就是我想出来的

我让它更简单了

要求的和有效的冲突

看起来效果更好了

const $field = $("#textfield") .blur(function() { const req = $(".radio:checked").val() === "Yes" $(this).toggleClass("req", req); $(this).toggleClass("valid", req && this.value.trim() !== ""); }); $(".radio").on("click", function() { const yes = this.id === "Yes"; $field .prop("required", yes) .prop("disabled", !yes) .toggleClass("req", yes) .toggleClass("valid", yes && $field.val().trim() !== ""); if (!yes) $field.val(""); });
.req { border: 1px solid red; } .valid { border: 1px solid #ced4da; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-check-input radio" type="radio" name="radio" id="Yes" value="Yes" /> <label class="radio" for="Yes">Yes</label> <input class="form-check-input radio" type="radio" name="radio" id="No" value="No" /> <label class="radio" for="No">No</label> <br /> <label for="required_later">Enable if "Yes"</label> <input type="text" name="textfield" id="textfield" placeholder="required" disabled>

相关内容

最新更新

热门标签：