Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > jquery mobile + php + javascript การ disable listmenu

jquery mobile + php + javascript การ disable listmenu

เริ่มหัวข้อใหม่

PALM

โพสกระทู้ ( 386 )
บทความ ( 0 )

ถ้าคลิ้กทำสี..ให้ disable list menuเขียนโค้ดเเล้่ว แต่ก็ไม่ได้อ้ะค้ะ
เขียนการ disable เป็น function บรรทัดที่ 9 เป็นต้นไป

Code (PHP)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
function dis()
    {
		var Rows = document.form1.count.value;
        for(i=1;i<=Rows;i++)
        {
				var chk_take1 = document.getElementById("chk_take"+i+"_1");
                var chk_take2 = document.getElementById("chk_take"+i+"_2");
                var take1 	 = document.getElementById("take"+i+"");
                 if(chk_take1.checked == true)
                       {
                        take1.disabled=false;
                       }
                 else take1.disabled=true;
				 alert(Rows);
        }
    }
</script>

</head>
<?
include "connect.php";
$brand = $_GET["brand"];
$class = $_GET["class"];
$_GET["mID"];
$strSQL   = "SELECT * FROM spare_chk
			 WHERE			 
			 brand_id   = '$brand'  AND
			 class_id   = '$class'  AND
			 system_id 	= '4' 		ORDER BY sp_name ASC";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$count    = mysql_num_rows($objQuery);
?>

<body>
<form action="save.php" name="form1">
    <div data-role="page">
    	<div data-role="content">
          <table border="1" >
                    <tr class="tbl1">
                        <th width="6%">#</th>
                        <th width="44%">รายการอะไหล่</th>
                        <th width="35%">เบิก/ทำสี</th>
                        <th width="5%">จำนวน</th>
                        <th width="5%">ราคา</th>
                        <th width="5%">ราคารวม</th>
                    </tr>
                    <?
					$i = 0;
					while($objResult = mysql_fetch_array($objQuery))
					{
					  $i++;
					  $sp_code   = $objResult["sp_code"];
					  $sp_name   = $objResult["sp_name"];
					  $price     = $objResult["price"];
					  $idno      = $objResult["idno"];
					?>
                    <tr class="tbl">
                        <td width="6%" align="center"><?=$i;?>.</td>
                        <td width="44%"><?=$sp_name?></td>
                        <td width="35%" align="center">
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="radio" name="chk_take<?=$i;?>" id="chk_take<?=$i;?>_1" value="1"checked />
                                <label for="chk_take<?=$i;?>_1" onclick="dis()">เบิก</label>
                                <input type="radio" name="chk_take<?=$i;?>" id="chk_take<?=$i;?>_2" />
                                <label for="chk_take<?=$i;?>_2" onclick="dis()">ทำสี</label>
                            </fieldset>
                        </div>
                        </td>
                        <td width="5%">
							<select name="take[<?=$i;?>]" id="take<?=$i;?>" onclick="dis()"> 
                            <? for($g=0;$g<=5;$g++) { ?>
                            <option value="<? echo $g; ?>"><? echo $g; ?></option>
                            <? } ?>
                            </select>	
                        </td>
                        <td width="5%"><?=number_format($price,'2','.',',');?></td>
                        <td width="5%">0</td>
                    </tr>
                    <? } ?>
                    <input name="count" type="hidden"  value="<?=$i;?>"> 
           </table>
           
        </div>
    </div>
</form>
</body>
</html>

Tag : PHP, MySQL

ประวัติการแก้ไข
2013-07-26 10:42:55

Date : 2013-07-26 10:41:54

By : PALM26

View : 1115

Reply : 9

No. 1

Krungsri

โพสกระทู้ ( 1,521 )
บทความ ( 2 )

Code (PHP)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('.Dis').click(function(e) {
        var id = $(this).parent().parent().parent().parent().parent().parent().find('select.Choose').attr('id');
		var Pr = $('#'+id).parent();
		Pr.attr('aria-disabled','true').addClass('ui-disabled');
    });
	$('.Ena').click(function(e) {
        var id = $(this).parent().parent().parent().parent().parent().parent().find('select.Choose').attr('id');
		var Pr = $('#'+id).parent();
		Pr.removeAttr('aria-disabled').removeClass('ui-disabled');
    });
});
</script>
</head>

<body>
<form action="save.php" name="form1">
  <div data-role="page">
    <div data-role="content">
      <table border="1" >
        <tr class="tbl1">
          <th width="6%">#</th>
          <th width="44%">รายการอะไหล่</th>
          <th width="35%">เบิก/ทำสี</th>
          <th width="5%">จำนวน</th>
          <th width="5%">ราคา</th>
          <th width="5%">ราคารวม</th>
        </tr>
        <?
					for($i = 0;$i<=5;$i++)
					{
					?>
        <tr class="tbl">
          <td width="6%" align="center"><?=$i;?>
            .</td>
          <td width="44%"><?="name ".$i?></td>
          <td width="35%" align="center"><div data-role="fieldcontain">
              <fieldset data-role="controlgroup" data-type="horizontal" >
                <input type="radio" class="Ena" name="chk_take<?=$i;?>" id="chk_take<?=$i;?>_1" value="1"checked />
                <label for="chk_take<?=$i;?>_1" >เบิก</label>
                <input type="radio" class="Dis" name="chk_take<?=$i;?>" id="chk_take<?=$i;?>_2" />
                <label for="chk_take<?=$i;?>_2" >ทำสี</label>
              </fieldset>
            </div></td>
          <td width="5%"><select class="Choose" name="take[<?=$i;?>]" id="take<?=$i;?>" >
              <? for($g=0;$g<=5;$g++) { ?>
              <option value="<? echo $g; ?>"><? echo $g; ?></option>
              <? } ?>
            </select></td>
          <td width="5%"><?=number_format($price,'2','.',',');?></td>
          <td width="5%">0</td>
        </tr>
        <? } ?>
        <input name="count" type="hidden"  value="<?=$i;?>">
      </table>
    </div>
  </div>
</form>
</body>
</html>

Date : 2013-07-26 11:35:16

By : Krungsri

No. 2

PALM

โพสกระทู้ ( 386 )
บทความ ( 0 )

ได้แล้วค่ะ..ขอบคุณค่ะ

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
	function simulateTableUpdate() {
    var array = "{\"table\":[[\"1\",\"#4711\",\"Voltage\",\"15\",\"15\",\"15\"],[\"2\",\"#0815\",\"Current\",\"2\",\"2\",\"2\"],[\"3\",\"#17\",\"Pressure\",\"1340\",\"1340\",\"1340\"],[\"4\",\"#404\",\"Temperature\",\"37\",\"37\",\"37\"]]}";

    updateTable(array);

}
	function updateTable(stringifiedTable) {

		var tableObject = jQuery.parseJSON(stringifiedTable);
		var tbody = $("#table > tbody");
		var rows = tableObject.table;

		var html = "";

		tbody.empty();
		$("#table").table("refresh");

		for (var i = 0; i < rows.length; i++) {
			html = html + "<tr>\n";
			for (var j = 0; j < rows[i].length; j++) {
				html = html + "<td>" + rows[i][j] + "</td>\n";
			}
			html = html + "</tr>\n\n";
		}
		alert("The old elements of the table have been cleared with $(\"#table > tbody\").empty(); \n\nThe following tags have been created and will now be appended to the tbody:\n" + html + "\n\nPlease notice that this code is identically to the previous one that was hardcoded in the HTML file (because i copied it and pasted it there!).");

		tbody.append(html);
		$("#table").table("refresh");

	}
	function refreshTable() {
		$("#table").table("refresh");
	}
</script>
<script type="text/javascript">
function dis()
    {
		var Rows = document.form1.count.value;
        for(i=1;i<=Rows;i++)
        {
				var chk_take1 = document.getElementById("chk_take"+i+"_1");
                var chk_take2 = document.getElementById("chk_take"+i+"_2");
                var take1 	 = document.getElementById("take"+i+"");
                 if(chk_take1.checked == true)
                       {
                        take1.disabled=false;
                       }
                 else take1.disabled=true;
				 //alert(Rows);
        }
    }
</script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('.Dis').click(function(e) {
        var id = $(this).parent().parent().parent().parent().parent().parent().find('select.Choose').attr('id');
		var Pr = $('#'+id).parent();
		Pr.attr('aria-disabled','true').addClass('ui-disabled');
    });
	$('.Ena').click(function(e) {
        var id = $(this).parent().parent().parent().parent().parent().parent().find('select.Choose').attr('id');
		var Pr = $('#'+id).parent();
		Pr.removeAttr('aria-disabled').removeClass('ui-disabled');
    });
	
});
</script>

<style type="text/css">
table {
    color: black;
    background: #fff;
    border: 1px solid #b4b4b4;
    font: bold 17px helvetica;
    padding: 0;
    margin-top:10px;
    width: 100%;
    -webkit-border-radius: 8px;
}
     
table tr td {
    color: #666;
    border-bottom: 1px solid #b4b4b4;
    border-right: 1px solid #b4b4b4;
    padding: 10px 10px 10px 10px;
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eee);
}
         
table tr td:last-child {
    border-right: none;
}

table tr:last-child td {
    border-bottom: none;
}
.tbl{
	font-size:14px;
	font-style:normal;
	font-weight:100;
}
.tbl1{
	font-size:16px;
	font-family:Verdana, Geneva, sans-serif;
	height:35px;
}
</style>
</head>
<?
include "connect.php";
$brand = $_GET["brand"];
$class = $_GET["class"];
$_GET["mID"];
$strSQL   = "SELECT * FROM spare_chk
			 WHERE			 
			 brand_id   = '$brand'  AND
			 class_id   = '$class'  AND
			 system_id 	= '4' 		ORDER BY sp_name ASC";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$count    = mysql_num_rows($objQuery);
?>

<body>
<form action="save.php" name="form1" method="post">
    <div data-role="page">
    	<div data-role="content">
          <table border="1" >
                    <tr class="tbl1">
                        <th width="6%">#</th>
                        <th width="44%">รายการอะไหล่</th>
                        <th width="35%">เบิก/ทำสี</th>
                        <th width="5%">จำนวน</th>
                        <th width="5%">ราคา</th>
                        <th width="5%">ราคารวม</th>
                    </tr>
                    <?
					$i = 0;
					while($objResult = mysql_fetch_array($objQuery))
					{
					  $i++;
					  $sp_code   = $objResult["sp_code"];
					  $sp_name   = $objResult["sp_name"];
					  $price     = $objResult["price"];
					  $idno      = $objResult["idno"];
					?>
                    <tr class="tbl">
                        <td width="6%" align="center"><?=$i;?>.</td>
                        <td width="44%"><?=$sp_name?></td>
                        <td width="35%" align="center">
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="radio" name="chk_take<?=$i;?>" class="Ena" id="chk_take<?=$i;?>_1" value="1"checked onclick="dis()"/>
                                <label for="chk_take<?=$i;?>_1" >เบิก</label>
                                <input type="radio" name="chk_take<?=$i;?>"  class="Dis"  id="chk_take<?=$i;?>_2" onclick="dis()"/>
                                <label for="chk_take<?=$i;?>_2">ทำสี</label>
                            </fieldset>
                        </div>
                        </td>
                        <td width="5%">
							<select class="Choose" name="take[<?=$i;?>]" id="take<?=$i;?>"  onblur="sum()"> 
                            <? for($g=0;$g<=5;$g++) { ?>
                            <option value="<? echo $g; ?>"><? echo $g; ?></option>
                            <? } ?>
                            </select>	
                        </td>
                        <td width="5%"><input type="text" id="price" name="price" value="<?=number_format($price,'2','.',',');?>" onblur="sum()"></td>
                        <td width="5%"><input type="text" id="total" name="total"></td>
                    </tr>
                    <? } ?>
                    <input name="count" type="hidden"  value="<?=$i;?>"> 
           </table>
           
        </div>
    </div>
</form>
</body>
</html>

Date : 2013-07-26 11:46:27

By : PALM26

No. 3

PALM

โพสกระทู้ ( 386 )
บทความ ( 0 )

แต่ไม่เข้าใจ โค้ดเท่าไหร่

var id = $(this).parent().parent().parent().parent().parent().parent().find('select.Choose').attr('id');

var Pr = $('#'+id).parent();

Date : 2013-07-26 11:47:08

By : PALM26

No. 4

PALM

โพสกระทู้ ( 386 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : Krungsri เมื่อวันที่ 2013-07-26 11:35:16

รายละเอียดของการตอบ ::

แต่ว่าทำไมต้องกด refresh ก่อนอ้ะค่ะ จึงจะใช้งานได้

Date : 2013-07-26 12:05:52

By : PALM26

No. 5

Krungsri

โพสกระทู้ ( 1,521 )
บทความ ( 2 )

มันเป็นการหา id จาก DOM อะครับ ในลักษณะของ parent และ Child เช่น

Code (PHP)

<tr>
  <td></td>
  <td><input type="radio" value=""></td>
  <td>
  	<select id="Choose">
      	<option value="0">0</option>
      	<option value="1">1</option>
    </select>
   </td>
</tr>

สมมุติว่าจับ Event click ของ Radio เพื่อหา id ของ select
Code (PHP)

<script>
	$('input[type="radio"]').click(function(e) {
        // $(this) จะเท่ากับ <input type="radio" value="">
		var Pr1 = $(this).parent().get(0).tagName; 
		// ซึ่งมันจะเป็น <td></td> ที่ครอบ <input type="radio" value="">
		var Pr1 = $(this).parent().parent().get(0).tagName;
		// ซึ่งมันจะเป็น <tr></tr> ที่ครอบ <td><input type="radio" value=""></td>
		
		//สมมุติว่าจะหา id ของ select เราต้องดูก่อนว่ามันมีอะไรเป็น parent ซึ่งก็คือ <tr></tr>
		var CurrentPR = $(this).parent().parent(); // ก็จะได้ <tr></tr> ไว้ใช้งาน
		//จากนั้นให้มันค้นหา elememt select
		var id = CurrentPR.find('select').attr('id'); //เอาค่า id ของ element select
		//อีกวิธีนึง var id = $(this).parent().parent().find('select').attr('id');
		alert(id)
    });
</script>

Date : 2013-07-26 12:18:43

By : Krungsri

No. 6

Krungsri

โพสกระทู้ ( 1,521 )
บทความ ( 2 )

ลองเปลี่ยน Script ดูครับ
Code (JavaScript)

<script type="text/javascript">
	$(document).ready(function(e) {
		$('.Dis').click(function(e) {
			var id = $(this).parent().parent().parent().parent().parent().parent().find('select.Choose').attr('id');
			var Pr = $('#'+id).parent();
			Pr.attr('aria-disabled','true').addClass('ui-disabled');
		});
		$('.Ena').click(function(e) {
			var id = $(this).parent().parent().parent().parent().parent().parent().find('select.Choose').attr('id');
			var Pr = $('#'+id).parent();
			Pr.removeAttr('aria-disabled').removeClass('ui-disabled');
		});
	});
	function simulateTableUpdate() {
		var array = "{\"table\":[[\"1\",\"#4711\",\"Voltage\",\"15\",\"15\",\"15\"],[\"2\",\"#0815\",\"Current\",\"2\",\"2\",\"2\"],[\"3\",\"#17\",\"Pressure\",\"1340\",\"1340\",\"1340\"],[\"4\",\"#404\",\"Temperature\",\"37\",\"37\",\"37\"]]}";
	
		updateTable(array);
	
	}
	function updateTable(stringifiedTable) {

		var tableObject = jQuery.parseJSON(stringifiedTable);
		var tbody = $("#table > tbody");
		var rows = tableObject.table;

		var html = "";

		tbody.empty();
		$("#table").table("refresh");

		for (var i = 0; i < rows.length; i++) {
			html = html + "<tr>\n";
			for (var j = 0; j < rows[i].length; j++) {
				html = html + "<td>" + rows[i][j] + "</td>\n";
			}
			html = html + "</tr>\n\n";
		}
		alert("The old elements of the table have been cleared with $(\"#table > tbody\").empty(); \n\nThe following tags have been created and will now be appended to the tbody:\n" + html + "\n\nPlease notice that this code is identically to the previous one that was hardcoded in the HTML file (because i copied it and pasted it there!).");

		tbody.append(html);
		$("#table").table("refresh");

	}
	function refreshTable() {
		$("#table").table("refresh");
	}
	function dis(){
			var Rows = document.form1.count.value;
			for(i=1;i<=Rows;i++){
					var chk_take1 = document.getElementById("chk_take"+i+"_1");
					var chk_take2 = document.getElementById("chk_take"+i+"_2");
					var take1 	 = document.getElementById("take"+i+"");
					 if(chk_take1.checked == true)
						   {
							take1.disabled=false;
						   }
					 else take1.disabled=true;
					 //alert(Rows);
			}
		}
</script>

Date : 2013-07-26 12:24:47

By : Krungsri

No. 7

PALM

โพสกระทู้ ( 386 )
บทความ ( 0 )

ยังเหมือนเดิมอ้ะ้ค้ะ

Date : 2013-07-26 13:56:39

By : PALM26

No. 8

Krungsri

โพสกระทู้ ( 1,521 )
บทความ ( 2 )

อาจเป็นเพราะ .table("refresh"); ผมก็คิดเอานะครับ ไม่เคยใช้ jQuery Mobile เหมือนกัน

Date : 2013-07-26 14:51:44

By : Krungsri

No. 9

PALM

โพสกระทู้ ( 386 )
บทความ ( 0 )

เดี่ยวลองดูไปเรื่อยๆเเล้วกันค่ะ....ขอบคุณมากๆน่ะค่ะ

Date : 2013-07-26 16:57:40

By : PALM26

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : jquery mobile + php + javascript การ disable listmenu

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก