我想在有人选择第一个选项时使用 jQuery 启用第一个输入
这里是示例代码:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-material">
<label for="storeCategory">Store Details</label>
<select class="form-control" id="storeABDetails">
<option value="message">Message</option>
<option value="image">Image</option>
<option value="video">Video</option>
</select>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="text" class="form-control" id="shortMessage" name="shortMessage" placeholder="Please enter the short message" >
<label for="shortMessage">Short Message</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="image" name="storeImage">
<label for="storeImage">Store Image</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="video" name="storeVideo">
<label for="storeVideo">Store Video</label>
</div>
</div>
</div>
如果消息被选择,则消息输入被启用,当图像和视频被选择时,图像和视频选择被启用和禁用。
我想要 jquery 如何做到这一点,请帮帮我
最佳答案
- 您需要使用
change()
检测select
何时更改的事件。 - 我已将 Message 的值更改为 shortMessage,这样可以更轻松地获取值并找到正确的输入。
- 使用
.prop
启用\禁用输入的功能。
var ddl = $('#storeABDetails').change(function() {
var val = ddl.val();
$('.form-material input').prop('disabled', true);
$('#' + val).prop('disabled', false);
});
ddl.trigger('change')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-material">
<label for="storeCategory">Store Details</label>
<select class="form-control" id="storeABDetails">
<option value="shortMessage">Message</option>
<option value="image">Image</option>
<option value="video">Video</option>
</select>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="text" class="form-control" id="shortMessage" name="shortMessage" placeholder="Please enter the short message" >
<label for="shortMessage">Short Message</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="image" name="storeImage">
<label for="storeImage">Store Image</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="video" name="storeVideo">
<label for="storeVideo">Store Video</label>
</div>
</div>
</div>
关于javascript - 如何使用 jQuery 在 Select 事件中禁用不同的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35251517/