使用 JQuery 删除禁用的属性 [重复]
Posted
技术标签:
【中文标题】使用 JQuery 删除禁用的属性 [重复]【英文标题】：Remove disabled attribute using JQuery [duplicate] 【发布时间】：2016-08-11 07:02:08 【问题描述】：我已经尝试过 JSFIDDLE 中给出的以下代码...
但它不起作用......
我只想在填写完所有输入字段后启用提交按钮......
JSFIDDLE
代码试过了：
<script>
(function()
$('form > input').keyup(function()
var empty = false;
$('form > input').each(function()
if ($(this).val() == '')
empty = true;
);
if (empty)
$('#register').attr('disabled', 'disabled');
else
$('#register').removeAttr('disabled');
);
)()
</script>
【问题讨论】：
form > input 将仅返回 form 的直接子代
使用$('form input')
@RayonDabre 我试过了...现在它可以工作了...但是即使在仅填写 3-4 个字段后也启用了禁用属性...我只想在填写完所有输入字段后将其删除
【参考方案1】：
$(document).ready(function()
$('.input-field').change(function()
var empty = false;
$('.input-field').each(function()
$('#btn').addClass('disabled');
if($(this).val() == '')
empty = false;
return false; //u need to break out from each
empty = true; //then u need to set value when it's out from each
);
if(empty == true)
$('#btn').removeClass('disabled');
);
);
你需要从每个中突破，然后你需要在它从每个出来时设置值
【讨论】：
【参考方案2】：您正在寻找的是：
$('#register').prop('disabled', true); //makes it disabled
$('#register').prop('disabled', false); //makes it enabled
【讨论】：
不，他们真正要找的是.prop()，而不是.attr()——他们想使用元素的 disabled 属性（我相信，当你使用 jQuery 时，它会隐含.attr() 方法，虽然我可能记错了），而不是乱搞它的属性。
上面的评论是正确的。如果 disabled 属性存在，无论它的值为“false”，该元素都将被禁用。【参考方案3】：
首先，监听input事件而不是keyup，DOM input事件在<input>或<textarea>元素的值发生变化时同步触发（包括paste使用right-click等等）
您正在更新每个元素的 empty 值。如果最后一个元素具有有效值，则变量将为false。在.each 循环中使用与flag 相同的变量，如果值为false，则防止循环下次出现
(function()
$('form input').on('input', function()
var empty = false;
$('form input').each(function()
if (!empty && $(this).val() == '')
empty = true;
);
$('#register').prop('disabled', empty);
);
)().link-button-blue
font: bold 14px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #002633;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: pointer;
.link-button-blue:disabled
font: bold 14px Arial;
text-decoration: none;
background-color: #333;
color: #ccc;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: no-drop;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div class="form-field-input">
<input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
</div>
<div class="form-field-label">Full Name :</div>
<div class="form-field-input">
<input type="text" value="" name="fname" id="fname" required>
</div>
<div class="form-field-label">Address :</div>
<div class="form-field-input">
<textarea value="" name="address" id="address" rows="4" pattern=".15," required title="15 characters minimum" required></textarea>
</div>
<br>
<div class="form-field-label">Email :</div>
<div class="form-field-input">
<input type="text" value="" name="email" id="email" required>
</div>
<br>
<div class="form-field-label">Mobile :</div>
<div class="form-field-input">
<input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
</div>
<br>
<div class="form-field-label">Phone :</div>
<div class="form-field-input">
<input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
</div>
<div class="form-field-label">Fax :</div>
<div class="form-field-input">
<input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
</div>
<div class="form-field-label">Birthdate :</div>
<div class="form-field-input">
<input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
</div>
<br>
<div class="form-field-label">Age :</div>
<div class="form-field-input">
<input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
</div>
<br>
<div class="form-field-label">Select Questionnaire Catagary :</div>
<div class="form-field-input">
<label class="checkbox">
<input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" />General</label>
<br>
<label class="checkbox">
<input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" />Stressfull Life Like - IT/BPO/Management</label>
<br>
<label class="checkbox">
<input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" />Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer</label>
<br>
<label class="checkbox">
<input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" />Heredity of Diabetes/Presently Suffering from Diabetes</label>
<br>
<label class="checkbox">
<input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" />Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack</label>
<br>
</div>
<br>
<div class="form-field-label">Gender :</div>
<div class="form-field-input">
<select name="gender" id="gender" required>
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<br>
<div class="form-field-label"></div>
</form>Fiddle demo
【讨论】：
以上是关于使用 JQuery 删除禁用的属性 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
使用jquery禁用具有名称属性的textarea字段[重复]