как присвоить параметр disabled к граф. кнопке

Тема в разделе "Другие языки", создана пользователем niv, 18 дек 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. niv

    niv Постоялец

    Регистр.:
    25 апр 2010
    Сообщения:
    57
    Симпатии:
    4
    помогите пож-та с кодом.
    1. состояние по умолчанию:
    страница открыта на ней картинка - DotSH-Bullet-Smile.png
    и checkbox. Флаг в checkbox не стоит и
    элемент (сама картинка DotSH-Bullet-Smile.png) неактивная.
    2. состояние
    - поставили флаг в checkbox
    картинка изменилась на smile.png и элемент (картинка smile.png) стал активным.
    PHP:
    <script type="text/javascript">
    function 
    test(f) {
        if (
    f.testCh.checkeddocument.getElementById('testSubm').src 'smile.png';
        else 
    document.getElementById('testSubm').src 'DotSH-Bullet-Smile.png';
    }
    </script>
    <form action="linc.php" method="get">
        <input type="checkbox" id="testCh" name="testCh" onclick="test(this.form);" />
        <input type="image" id="testSubm" name="testSubm" src="DotSH-Bullet-Smile.png" disabled="disabled"/>
    </form>
    остаётся прикрутить к кнопке параметр - disabled, но вот как?
    вставил disabled="disabled"... ничего не получается :(.
     
  2. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    попробуйте от input type=image для кнопки перейти к родному submit.

    PHP:
    <input type="submit" alt="Искать" class="find" value="" id="testSubm">

    .
    find {
    background:url("find.gif"repeat scroll 0 0 transparent;
    height:100px;
    width:20px;
    }

     
  3. niv

    niv Постоялец

    Регистр.:
    25 апр 2010
    Сообщения:
    57
    Симпатии:
    4
    Вы меня извините, но я не понял как это увязать с имеющимся кодом. Т.е. - .find вставить в скрипт?
    Но откуда find.gif ?

    Если не сложно, дайте пож-та готовое решение.
     
  4. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    http://jsfiddle.net/22rgt/

    например, так
     
    niv нравится это.
  5. steel_HILL

    steel_HILL Постоялец

    Регистр.:
    15 апр 2010
    Сообщения:
    53
    Симпатии:
    14
    вот готовое решение, кроме мозиллы проверял в шестом осле - все пашет, только что-то при загрузке не хочет фон на кнопку ставится, пришлось насильно ставить :)
    HTML:
    <html>
    <head>
    	<title>test_img_form</title>
    	<style type="text/css">
    		#testSubm {
    		background:url("find.gif") repeat scroll 0 0 transparent;
    		width:75px;
    		height:20px;
    		}
    	</style>
    	<script type="text/javascript">
    		function intervOnLoad(){
    			tmId=setInterval("chekhIsId(tmId)",25);
    		}
    		function chekhIsId(timIdVar){
    			if(document.getElementById('testSubm')){
    				document.getElementById('testSubm').style.backgroundImage = 'url(DotSH-Bullet-Smile.png)';
    				clearInterval(timIdVar);
    			}
    		}
    		function test(f){
    			if(f.checked){
    				document.getElementById('testSubm').disabled = '';
    				document.getElementById('testSubm').style.backgroundImage = 'url(smile.png)';
    			}
    			else{
    				document.getElementById('testSubm').disabled = "disabled";
    				document.getElementById('testSubm').style.backgroundImage = 'url(DotSH-Bullet-Smile.png)';
    			}
    		}
    		intervOnLoad()
    	</script>
    </head><body>
    <form action="/" method="get">
    	<input type="checkbox" id="testCh" name="testCh" onclick="test(this);" />
    	<input type="submit" alt="Искать" value="" id="testSubm" disabled="disabled" />
    </form>
    </body></html>
     
    niv нравится это.
  6. niv

    niv Постоялец

    Регистр.:
    25 апр 2010
    Сообщения:
    57
    Симпатии:
    4
    большое спасибо!
    Но ведь это решение со стилями (натягивая картинку на кнопку).
    А с заменой картинок такое нельзя реализовать?
    нечто похожее увидел здесь:http://www.pleer.ru/_25159.html

    только чтобы увидеть как работает, нужно товар добавить и зайти в корзину. Если в поле изменить количество, картинка - "персчитать" меняется с серой на зелёную и становится активной.
     
  7. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    PHP:
    function CartCalc() {
    144 var prod_counts=new Array();
    145 var cartChange=false;
    146 var totalPrice=0;
    147 $(".prod_count").each(function(i){
    148 var tid=parseInt((this.id).replace('cartcnt_',''));
    149 prod_counts[tid]=this.value;
    150 if(cartOrigin[tid]!=parseInt(this.value)) {
    151 cartChange=true;
    152 }
    153 $('#cartPrice_'+tid).text(cartOriginPr[tid]*prod_counts[tid]);
    154 totalPrice+=cartOriginPr[tid]*prod_counts[tid];
    155 });
    156 totalOrderPrice=totalPrice;
    157 $('#carttotalprice').text(totalOrderPrice+parseInt($('#cartdelivprice').text()));
    158 if(cartChange){
    159 $('#order').attr("disabled","true");
    160 $('#order').attr("src","/i/buttons/disorder.gif");
    161 $('#cartconfirm').removeAttr("disabled");
    162 $('#cartconfirm').attr("src","/i/buttons/recount.gif");
    163 } else {
    164 $('#cartconfirm').attr("disabled","true");
    165 $('#cartconfirm').attr("src","/i/buttons/disrecount.gif");
    166 $('#order').removeAttr("disabled");
    167 $('#order').attr("src","/i/buttons/order.gif");
    168 }
    169
    вот код который вы ищете. обратите внимание как у них определяется "активность" кнопки;-)
     
  8. niv

    niv Постоялец

    Регистр.:
    25 апр 2010
    Сообщения:
    57
    Симпатии:
    4
    да эту функцию я видел, но поскольку слаб в програмировании, никак не могу понять как выбросить всё лишнее из этой функции и реализовать задуманное :(
     
  9. steel_HILL

    steel_HILL Постоялец

    Регистр.:
    15 апр 2010
    Сообщения:
    53
    Симпатии:
    14
    Конечно, можно - но вот зачем тогда добавлять disable к граф. кнопке? Достаточно того, что первая картинка будет в серых тонах...

    HTML:
    <html>
    <head>
    	<title>test_img_form</title>
    	<script type="text/javascript">
    		function gID(i){return document.getElementById(i);}
    		function f_chk(){
    			if(gID('testChek').checked){
    				gID('testSubm').style.cursor = 'pointer';
    				gID('testSubm').src = 'smile.png';
    			}
    			else{
    				gID('testSubm').style.cursor = 'default';
    				gID('testSubm').src = 'DotSH-Bullet-Smile.png';
    			}
    		}
    		function f_clk(){
    			if(gID('testChek').checked){
    				gID('testChek').checked='';
    				gID('testSubm').src = 'DotSH-Bullet-Smile.png';
    				gID('testForm').submit();
    			}
    		}
    	</script>
    </head><body>
    <form action="/" method="get" id="testForm">
    	<input type="text" id="testNum" name="testNum" value="100500" style="width:55px" />
    	<input type="checkbox" id="testChek" name="testChek" onclick="f_chk();" />
    	<a href="#" style="cursor:default" onclick="f_clk();return false;">
    		<img id="testSubm" src="DotSH-Bullet-Smile.png" border="0" />
    	</a>
    </form>
    </body></html>
    Здесь присутствует эффект с курсором, но не уверен, что это будет работать в некоторых браузерах(например в Safari).
     
    niv нравится это.
  10. niv

    niv Постоялец

    Регистр.:
    25 апр 2010
    Сообщения:
    57
    Симпатии:
    4
    steel_HILL, СПАСИБО!
    только в форме оставил
    PHP:
    <form action="/" method="get" id="testForm">

        <
    input type="checkbox" id="testChek" name="testChek" onclick="f_chk();" />
        <
    a href="#" style="cursor:default" onclick="f_clk();return false;">
            <
    img id="testSubm" src="DotSH-Bullet-Smile.png" border="0" />
        </
    a>

    </
    form>
    Вроде всё работает как надо.
     
Статус темы:
Закрыта.