jQuery代码禁用按钮

时间:2016-05-31 10:55:56

标签: jquery html

我需要一个jQuery中的脚本,只有在没有选中单选按钮(否)或选择了单选按钮(是)时才启用该按钮,禁用输入文本,如果其长度为> = 2然后启用按钮Add。我发布了剧本。谢谢你的帮助。

$(document).ready(function() {    
    if ($('#Check').is(':checked')) {
        $('#Enable').removeAttr('disabled');
        $('#buttonSubmit').attr('disabled', true);
        $('#Enable').keyup(function() {
            if ($(this).val().length != 0) {
                $('#buttonSubmit').attr('disabled', false);
            } else {
                $('#buttonSubmit').attr('disabled', true);        
            }
        })
    }
});
<tr class="spaceUnder">
    <td>
        <b>Pin Sblocco:&nbsp;<font color="red">*</font>&nbsp;&nbsp;&nbsp;</b>
    </td>
    <td> 
        Si&nbsp;&nbsp;<input type= "radio" name="PinSblocco" value="Si" id="Check">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;No&nbsp;&nbsp;<input type="radio" name="PinSblocco" value="No" id="NoCheck" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;---------------------------->
    </td>
    <td>
        <input type="text" class="form-control" name="PinSbloccoCod" placeholder="Pin di sblocco"  maxlength="10" id="Enable" disabled/>
    </td>
</tr>

5 个答案:

答案 0 :(得分:0)

试试这个..

 $(document).ready(function() {
        $('input[type=radio][name=PinSblocco]').change(function() {
            if (this.value == 'Si') {
                 $('#buttonSubmit').attr('disabled', false); 
            }
            else {
                 $('#buttonSubmit').attr('disabled', true); 
            }
        });
    });

答案 1 :(得分:0)

示例HTML:

<span>
    <input type="radio" value="false" name="item[shipping]" id="item_shipping_false" checked="checked">
    <label for="item_shipping_false" class="collection_radio_buttons">No</label>
</span>
<span>
    <input type="radio" value="true" name="item[shipping]" id="item_shipping_true">
    <label for="item_shipping_true" class="collection_radio_buttons">Yes</label>
</span>
<input id="item_shipping_cost" class="currency optional" type="text" size="30" name="item[shipping_cost]" disabled="disabled">

JS是

$('#item_shipping_true').click(function()
{
  $('#item_shipping_cost').removeAttr("disabled");
});

$('#item_shipping_false').click(function()
{
  $('#item_shipping_cost').attr("disabled","disabled");
});

这里有JSfiddle

答案 2 :(得分:0)

您只需要在$(&#34; #Check&#34;)。change()事件中添加代码,并将$(&#39; #Enable&#39;)。keyup()更改为更改事件

$( document ).ready(function() {
    $("#Check").change(function() {
        if ($('#Check').is(':checked')) {
            $('#Enable').removeAttr('disabled');
            $('#buttonSubmit').attr('disabled', true);
        }
    });
    $('#Enable').keyup(function() {
        if ($(this).val().length != 0) {
            $('#buttonSubmit').attr('disabled', false);
        } else {
            $('#buttonSubmit').attr('disabled', true);        
        }
    });
});

答案 3 :(得分:0)

$('input,button,submit').each(function() {
$(this).attr('disabled','disabled');
});

在您想要的任何事件上编写此代码

答案 4 :(得分:0)

使用prop代替attr。试试这个:

$(document).ready(function() {
    var $radio = $(":radio[name='PinSblocco']");

  // Enable Disable Textbox
  $radio.change(function(){
    var checked = $(":radio[name='PinSblocco']:checked").val();
    $("#Enable").prop("disabled", checked !== "Si");
  });

  // Enable Disable Button
  $("#Enable").keyup(function(){
    $("#buttonSubmit").prop("disabled", $(this).val().length < 2);
  });
});

&#13;
&#13;
$(document).ready(function() {
  var $radio = $(":radio[name='PinSblocco']");

  // Enable Disable Textbox
  $radio.change(function() {
    var checked = $(":radio[name='PinSblocco']:checked").val();
    $("#Enable").prop("disabled", checked !== "Si");
  });

  // Enable Disable Button
  $("#Enable").keyup(function() {
    $("#buttonSubmit").prop("disabled", $(this).val().length < 2);
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="spaceUnder">
  <td>
    <b>Pin Sblocco:&nbsp;<font color="red">*</font>&nbsp;&nbsp;&nbsp;</b>
  </td>
  <td>
    Si <input type="radio" name="PinSblocco" value="Si" id="Check">
    No <input type="radio" name="PinSblocco" value="No" id="NoCheck">
  </td>
  <td>
    <input type="text" class="form-control" name="PinSbloccoCod" placeholder="Pin di sblocco" maxlength="10" id="Enable" disabled/>
  </td>
  <td>
    <input type="button" class="form-control" id="buttonSubmit" value="Add" disabled/>
  </td>
</tr>
&#13;
&#13;
&#13;

JsFiddle:https://jsfiddle.net/ashishanexpert/f4dtfvx2/