js动态修改input是否必选

最新推荐文章于 2024-07-14 03:34:18 发布

编程界的小子

最新推荐文章于 2024-07-14 03:34:18 发布

阅读量825

点赞数

分类专栏：笔记 js 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_38076674/article/details/129131388

版权

笔记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

<dl>
        <dt><span style="font-size:18px;color:red;">*</span>评审结果：</dt>
		<dd>
		    <select id="pingShenResult" name="baoGao.pingShenResult">
                <option value="3" <c:if                 test="${baoGao.pingShenResult==3}">selected="selected"</c:if>>评审结果公示</option>
                <option value="1" <c:if test="${baoGao.pingShenResult==1}">selected="selected"</c:if>>采购失败</option>
			</select>
		</dd>
</dl>

<tbody id="houxuanren2">
    <c:forEach var="houXuanRen2" items="${dbHouXuanRenList}">
		<tr>
			<td><input class="required number" type="text" style="width:40px;padding-left:0px;" placeholder="排名" class="required v-number" name="" value="${houXuanRen2.paiming}"></td>
			<td><input class="required" type="text" onmouseover="this.title=this.value" style="width:220px;padding-left:0px;" placeholder="成交候选人名称" name="" value="${houXuanRen2.touBiaoRenName}"></td>
            <td><input class="required" type="text" style="width:160px;padding-left:0px;" placeholder="统一社会信用代码" name="" value="${houXuanRen2.agencyCode}"></td>
            <td><input class="required" type="text" style="width:120px;padding-left:0px;" placeholder="中标价格" name="" value="${houXuanRen2.bidPrice}"></td>
            <td><input class="required" type="text" style="width:100px;padding-left:0px;" placeholder="项目负责人" name="" value="${houXuanRen2.bidderLeader}"></td>
            <td><input class="required" type="text" style="width:90px;padding-left:0px;" placeholder="联系方式" name="" value="${houXuanRen2.contactInformation}"></td>
			<td></td>
        </tr>
    </c:forEach>
</tbody>

//监听select变化
$("#pingShenResult").change(function() {
    setRequired($('#pingShenResult').val())
});
//设置是否必选
function setRequired(pingShenResult){
    if(pingShenResult==1){
        //失败 移除必选样式
        $("tbody>tr>td>input").removeClass("required");
        //增加 输入框样式
        $("tbody>tr>td>input").addClass("textInput");
    }else{
        //成功  增加必选样式
        $("tbody>tr>td>input").addClass("required");
    }
}

前端js样式修改，动态批量修改input样式，通过监听select的值变化，修改input required属性达到效果