Jsp 单击使button不可用

 

经常用到的一种情况：在分页显示查询结果数据时候，当到达首页时候使得首页button和上一页button不可用，到达尾页时候下一页和尾页不可用。

第一种代码实现（失败）：

Jsp：
<input type="button" value="首页" id="firstPage"  onclick="goFirst()"  />
<input type="button" value="上一页" id="previousPage" onclick="goPrevious()"/>
<input type="button" value="下一页" id="nextPage" onclick="goNext()"/>
<input type="button" value="尾页" id="lastPage" onclick="goLast()"  />

Javascript：
function goFirst() {
		window.self.location = "../servlet/user_info?pageNo=${userPageModel.firstPage}";		
	}

	function goPrevious() {
		window.self.location = "../servlet/user_info?pageNo=${userPageModel.previousPage}";
	}
	function goNext() {
		window.self.location = "../servlet/user_info?pageNo=${userPageModel.nextPage}";
	}
	function goLast() {
		window.self.location = "../servlet/user_info?pageNo=${userPageModel.lastPage}";
	}

第二种代码实现（失败）：

Jsp代码同上，在javascript代码中每个方法加上设置button.disabled=true;即

// previousPage是html button标签的id
document.getElementById("previousPage").disabled=true;
function goPrevious() {
		window.self.location = "../servlet/user_info?pageNo=${userPageModel.previousPage}";
		document.getElementById("previousPage").disabled=true;
	}

第三种代码实现（成功一半，失败一半）：

Jsp代码：
<input type="button" value="首页" id="firstPage" onmousedown="goFirst()" onmouseup="setDisabled(this)"/>

Javascript代码：
function goFirst() {
		window.self.location = "../servlet/user_info?pageNo=${userPageModel.firstPage}";		
	}
	
	function setDisabled(field) {
		field.disabled=true;
	}

成功一半失败一半的原因在于 onclick 、onmousedown、onmouseup 的区别：

click=mousedown+mouseup
鼠标按下弹起为一次click，如果只按下但是移开了不算一次click

onmouseup，有特殊情况，不管在哪里按下，只要弹起的时候在你目标区域上，就会触发。
onclick，是必须有完整的在当前区域按下，弹起。

 

最后采用JSTL的C标签来完成：（成功）

Jsp代码：
<c:choose>
	<c:when test="${userPageModel.pageNo eq 1}"  >
		<input type="button" value="shouye" id="firstPage" disabled="true" />
		<input type="button" value="上一页" id="previousPage" disabled="disabled"/>	
	</c:when>
	<c:otherwise>			
		<input type="button" value="首页" id="firstPage"  onclick="goFirst()" />		<input type="button" value="上一页" id="previousPage" onclick="goPrevious()"/>	
		</c:otherwise>
	</c:choose>
	<c:choose>
		<c:when test="${userPageModel.pageNo eq userPageModel.lastPage }"  >
			<input type="button" value="下一页" id="nextPage" disabled="disabled"/>
			<input type="button" value="尾页" id="lastPage" disabled="disabled"  />			
		</c:when>
		<c:otherwise>			
			<input type="button" value="下一页" id="nextPage" onclick="goNext()"/>
			<input type="button" value="尾页" id="lastPage" onclick="goLast()"  />			
		</c:otherwise>
	</c:choose>
Javascript代码
同第一种情况代码，此处略。